[e.boal]

Probably a basic answer to this....

I have two columns, one floated left (247px) and one floated right (502px) with 1px borders. In the left column, there are three divs and each of this has a margin of 1px at the bottom to separate them. When I put content in one of these divs it overflows and pushes the right float div down the screen! Why is this?

[Jayx]

There could be several reasons for this - you know the drill... post it.

[e.boal]

/* Left Column */

#leftcol {

width: 247px;
background-color:#FFFFFF;
float: left;

}

#newsletter {

background-color: #FFF;
border: 1px solid #0CF;
margin-bottom: 1px;

}

#tools {

background-color: #FFF;
border: 1px solid #OCF;
margin-bottom: 1px;

}

/* Right Column CSS*/

#rightcol {

width: 502px;
float: right;

}

#quickref {

width: 500px;
height: 200px;
background-color: #FFF;
border: 1px solid #7B5561;
float: right;

}

[lmclaney]

Without seeing your css I would take a guess and say that you need to specify a width for the content in each column so that they dont overflow the columns.

Edit: Ok now seeing your CSS you should first start with not specifying your dimensions in pixels but in percentages as this will allow for the content to expand and contract as a browser screen is changed size and when more content is added.

[e.boal]

If the column div is set do the divs within it not automatically inherit the width?

It is a fixed width layout

[pgo]

They should fit the width of their parent. Do you have a link? Or all the HTML and CSS?