two-column layout issues

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

two-column layout issues

Post 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? :?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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:
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: two-column layout issues

Post 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;
}
(#10850)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Static width.

Ugh.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I love static widths - makes it so much easier to layout content.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
Post Reply