Question

I am attempting to set-up my homepage with three columns (each could be different heights depending upon the content) and for some reason the columns within my ‘content’ div do not respect it. This causes the columns to overflow onto the information below. I have tried to create the same layout using positioning since i understand its the better way of doing things; however i’ve had no luck.

I tried to use the ‘overflow’ element which does take the columns into consideration but it then puts a scroll bar on the content element.

Please see an example of my work here

1. Why does it does this? (edit) – Understood

2. How do i get it so the columns sit inside the
   content element and respect the flow of the document? (edit) – resolved

3. Could you advise a better way of doing this maybe using positioning? Is the method I’m using the best way of positioning, or should i be using relative, static, etc?

Answer 1

1. Content will overflow its bounding box unless you use overflow: hidden (or similar) in some cases; see overflow and clipping in the CSS2 spec

2. Since you are floating your three columns, you need to use something like Clearfix so that content that comes after the columns’ container will clear past them. (Alternatively, you could set clear: both on the <p> containing the footer content.)

3. Floating is the common way of approaching multiple columns, so you’re headed in the right direction. Positioning almost certainly won’t help you here.