Yet another Holy Grail (3-column css liquid layout)
In the quest of creating a rocking and flexible layout for Riff‘s redesign, I’ve started looking for the Holy Grail of the CSSs, the perfect 3-column css liquid layout. My requirements (self-imposed) where:
- No tables (of course)
- Use 100% of the available width
- Fixed width left column
- Right column with a minimun width, but scaling up when available width is enough. (This is because a site displayed on a 1900pixels wide screen, it’s useless to have the central pane with 1500px, the right column should start using some more space)
- Both right and left columns should expand to the bottom, the content cannot wrap around them
- Both columns must be collapsibles and the layout should continue working
Central pane should expand itself to the available width, regardless of the content not forcing it. This discards using “display: table” for the content div.(I had to add the display: table, otherwise the content wraps around (and behind!) the columns)
After digging in serious similar implementations like Matthew Levine’s which did not make it for me, because the content class uses padding at left and right to provide space for the columns and I need them to be collapsible, and the columns are not equal in height, or Faux Columns and this, and using the “padding: x/margin: -x” trick for the columns height, I ended up learning enough to put together something that (for the moment I think) works perfectly and satisfies my initial requirements.
Below are the Layout HTML and style with comments:
<div class="container"> <div class="column left">Lorem ipsum</div> <div class="column right">Lorem ipsum</div> <div class="content">Lorem ipsum</div> </div>
html,body
{
min-width: 500px; /* This avoids the html being compressed beyond this width */
}
.container
{
height:auto;
overflow:hidden; /*This hides the exceeding portion of the columns created by the padding/margin trick, thus avoiding the scrollbar of the browser to extend more than needed*/
}
.column
{
position: relative;
border-style: solid;
padding-bottom: 30000px; /*This extends the height of the column so the main content does not wrap around it*/
margin-bottom: -30000px; /*This 'reclaims' the extra height created by the padding*/
}
.left
{
float: left;
background-color: #0f0;
width: 200px;
}
.right
{
background-color: #ff453f;
width: 200px;
min-width: 25%; /*This makes the column start growing when the total width is greater than 200px / 25% = 800px.*/
float: right;
}
.content
{
border-style: solid;
background-color: #242eff;
display: table;
}