CODEWITHSUNDEEP
csshtml
Blob
Blob

Reputation: 541

Columns overflow main div element

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?

Upvotes: 0

Views: 76

Answers (3)

bdparrish
bdparrish

Reputation: 2764

You are floating those columns, and you don't clear the float so what is happenings is that those 3 divs are "floating" above everything else, so the browser doesn't include them in the main html. You must clear the float with the CSS clear value.

See the jsFiddle here

Also check out this tutorial

Upvotes: 0

James Aylett
James Aylett

Reputation: 3372

  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.

Upvotes: 2

huzzah
huzzah

Reputation: 1805

Try adding overflow:hidden to your content div and removing the height restriction, like below:

#content
{
    background-color:Blue;

    width:800px;
overflow:hidden;

Upvotes: 1

Related Questions