2 column layout, why isn't the right column wrapping on the bottom?

[AffiliateDreamer]

Hi,

From what I understand of float layouts, if you have 2 columns and the second column doesn't have enough room to be displayed on the right side (both columns are floated to the left), then the 2nd column will wrap around to the bottom of the page.

The way around this is using negative margins.

Well i'm looking at this blog that has a 2 column setup, when I decrease the browser width the 2 columns stay as they should. Looking at the CSS shows there are not using negative margins.

So what is the technique then?

[AffiliateDreamer]

ok I think I figured out why my CSS wasn't working.

My layout was like this:

<div id="content">
</div>
<div id="sidebar">
</div>
<div id="ads">
</div>

So 3 columns.

My widths where:

content:
width: 56%
padding-right: 2%

sidebar ads
width: 22%

So the combined width of all of this was:
56 + 2 + 44 = 102 which was causing the 3rd column to wrap below the 2nd column.

So to calculate the width of the page, which elements do you have to add up?

Width + margins + padding

or is there more?

[luispunchy]

Hi AffiliateDreamer. You also need to add the values of borders if you’ve applied them. This is called the box model, an important concept in CSS. Do a search for “box model css” and you’ll find lots of detailed info. But here’s a quick rundown:

Think of every element in your page as a box. The width and height you assign an element actually only refers to the width and height of that element’s content. The total box dimension is the element’s content area, plus any padding, borders, and margins given to that element. For example:

div#box {
 margin:10px;
 width:70px;
 padding:5px;
 border:1px solid #000;
}

That div has a width of 70px. But its total box width would be 102px – the calculation goes like this:
70px (width) + 10px (total of left and right padding) + 2px (total of left and right border) + 20px (total of left and right margin).

Things can get trickier when you work with percentages, in part due to certain browser quirks in rounding off, but the same concept applies.

[AffiliateDreamer]

Thanks, that makes sense.