Usually when people have trouble with floating columns it's because they've specified a width where there doesn't always need to be one.
A simple two-column layout can be achieved by:
- Floating the element that comes first in the source and giving it a width.
- Giving the other element a margin wider than the width of the float and in the same direction as the float. So, if you're floating your left column, you give the other
margin-leftand vice versa. This column does not need a width as it automatically fills the remaining space.
It's that simple. Let's take a look at a few quick examples.
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
This is the left column
#left {
float: left;
width: 50%;
}
This is the right column
#right {
overflow:hidden
}
Or, if we wanted to have the right column come first in the source:
<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
</div>
This is the right column
#right {
float: right;
width: 50%;
}
This is the left column
#left {
overflow:hidden;
}
If you want the columns to appear equal in length, you may want to look into using Faux Columns.