Hello:

I am in the middle of creating a site for a very worthy cause - to stop puppy mills.

I am very new to CSS and the problem I am having is I can not seem to get the "border" of my "container" tag to go all the way down unless I add a "height" attribute in the code.

I assumed when I code such as:

<div id=container>
<div id="header"></div>
<div id="content"></div>
</div>

that the "container would hold all the items in it; hence adding a border along the left and right side in container code would create a "box" with a border.

What did I do wrong?

here is the page www.inlightwebdesign.com/sayno2/index.html

Any information would be greatly appreciated!!

Thanks,

Dianna

Looks fine to me, what exactly is the problem again?

I am very new to CSS and the problem I am having is I can not seem to get the "border" of my "container" tag to go all the way down unless I add a "height" attribute in the code.

Didn't look, but it sounds like the usual problem of not clearing the floats.

Yep.. lots of floats with no clearing.

Hello:

Thanks for the help . . . just what is "clearing" and which way do I clear the floats?

Sorry, I sure this is real basic stuff . . . but I need the basics! :-)

Dianna

After the floated divs, add this bit of code

<br style="clear:both" />

That should sort it

(also, <br /> was just an example, you can also use other tags, i just use <br /> because its self-closing)

To understand clearing floats read here: http://css-discuss.incutio.com/?page=ClearingSpace

Originally Posted by Gilligan

After the floated divs, add this bit of code

<br style="clear:both" />

That should sort it

(also, <br /> was just an example, you can also use other tags, i just use <br /> because its self-closing)

Just to reinforce what the resident lovely lady in red said, I do not advocate or recommend the use of extra markup to clear an element since it introduces non-semantic code that has no place being in the document and can lead to code-bloat. Instead, just applying the clear property to the element following the float will take care of it (though you may have to use overflow: hidden; to force an element to contain its floated children - a common occurance in many of the layouts I develop).