Page 1 of 1

two-column layout issues

Posted: Fri Mar 16, 2007 11:54 am
by Luke
I've always set up my two-column layouts something like:

Code: Select all

<div id="container">

 <div id="column_left">
  <!-- content //-->
 </div>
 <div id="column_main">
  <!-- content //-->
 </div>

</div>

Code: Select all

#column_left
{
    width: 200px;
    float: left;
}
#column_main
{
    padding-left: 200px;
    background: #fff url(../faux_column.gif) repeat-y;
}
And it works fine except when I need to float/clear things in the main column in which the fact that the left column is floated causes issues with the main content clearing it. It's just a pain in the rear... is there a better way you guys know of? :?

Posted: Fri Mar 16, 2007 12:04 pm
by matthijs

Code: Select all

#column_left
{
    width: 200px;
    float: left;
}
#column_main
{
    margin-left: 200px; /* probably should take a bit more, like 210px */
    background: #fff url(../faux_column.gif) repeat-y;
}
Or do a float:right; on column_main, but that's assuming a fixed width.

Posted: Fri Mar 16, 2007 12:05 pm
by Luke
but if you do it like that (with margin) you can't use the faux-column technique.

EDIT: lol I guess you can... just not the way I was doing it (I just read the article I linked to) :oops:

Re: two-column layout issues

Posted: Fri Mar 16, 2007 2:21 pm
by Christopher
Why not just:

Code: Select all

<div id="container">

 <div id="column_left">
  <!-- content //-->
 </div>
 <div id="column_main">
  <!-- content //-->
 </div>

</div>

Code: Select all

#container
{
    width: 500px;
}
#column_left
{
    width: 200px;
    float: left;
}
#column_main
{
    width: 300px;
    float: right;
}

Posted: Fri Mar 16, 2007 2:26 pm
by pickle
Static width.

Ugh.

Posted: Fri Mar 16, 2007 2:29 pm
by matthijs

Code: Select all

#container
{
    width: 50em; /* or px, or % */
}
#column_left
{
    width: 30%;
    float: left;
}
#column_main
{
    width: 60%; /* or some other "golden-Ratio"-like typographically responsible ratio :) */
    float: right;
}

Posted: Fri Mar 16, 2007 3:39 pm
by Kieran Huggins
I love static widths - makes it so much easier to layout content.

Posted: Fri Mar 16, 2007 4:11 pm
by Luke
I don't hate static widths. I've said this at least a million times, but I'll say it one more time. I like fixed-width layouts for sites that cater well to fixed-width sites. Information-rich sites such as this one do not belong in a fixed-width site, however. They just don't work well.