2nd column is tucking below the 1st column, what are common causes of this?

Question

Hi,

My HTML is too eleborate to post here.

I have a 2 column layout, the 1st column is 160px and the 2nd column is much bigger.

For some reason the 2nd column is tucking below the 1st column.

What are common causes for this?

Update

What I want is this:

Column#1 Column#2

What is displaying (firefox is ok, IE6 is causing the problem):

Column#1
Column#2

Update

The 2nd column is wrapped in a

And the blueprintcss has this:

.container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

So I guess it is the clear:both ?

Answer 1

Assuming both columns are floated (left), the second column will tuck underneath the first one if:

• It has clear:left; assigned to it
• it’s too wide for the available space

If the problem is occurring in IE 6, it might be the IE 6 3-pixel gap bug.

(We’d probably have a better chance of helping you if you put some actual code in the post. At the moment we’re guessing.)

Update

I don’t think it’s clear: both; — that rule won’t be affecting IE 6, as it doesn’t support the :after pseudo-selector. Here’s a test page demonstrating it:

http://www.pauldwaite.me.uk/testy.html

Answer 2

In addition to Paul's 2 reasons, you have to keep in mind IE6 "double margin" bug.

In IE6, float property doubles margin accordingly (float: left; affects margin-left and vice versa).