Div Stops Short

[marie b.]

On this website, I'm trying to get the blog posts and sidebar to both be contained in the 'container' div.

 

As you can see, the container div stops just above the sidebar and blog posts. I've no idea why, as all the div tags are accounted for and in place. I've looked over my CSS and nothing seems to be out of order.

 

It's baffling me.

[marie b.]

Ok, so someone messed the work I did up, but it's their site so I can't complain.

 

Nevermind.

[marie b.]

Ok, scratch the above post too.

 

I still need help with the original issue. Yeesh.

[TweezerMan]

I see the issue in Firefox, but not IE.

 

It looks to me the issue is caused by the fact that the "contain" div only contains "floated" divs. The "blog" div is floated left, and the "side" div is floated right.

 

Floating a div removes it from what's known as the "text flow". Firefox is only using text that is part of the text flow to determine the height of the "contain" div, and there is no text within the "contain" div that is a part of its text flow.

 

There's more to the page that you'll have to fix, but basically you need to "unfloat" the "side" div.

 

Hope this helps...

[marie b.]

That fixed it. Thanks. Cripes, something so simple.

 

Now all I need to do is figure out a way to stop the sidebar from breaking up.

[TweezerMan]

Here's some more suggestions for you:

 

1) Remove the <center> and </center> tags from your code. They're not helping here. Whatever you're wanting to do, there's probably a better way to do it.

 

2) I realized that you don't have to unfloat the "side" div. Put the float back (float: right;), then add this code just before the last div (the "contain" div) in your HTML:

><br clear="both" />

 

3) Set the left margin on the "side" div so that it clears the "blog" div:

>margin-left: 450px;

[marie b.]

Working nicely now, thanks. : )

[jhollin1138]

><br clear="both" />

<{POST_SNAPBACK}>

Thanks, that fixed a problem I was having too!

[jhollin1138]

><br clear="both" />

<{POST_SNAPBACK}>

BTW, if you want your site to validate XHTML Strict, use the following.

><br style="clear:both" />