CODEWITHSUNDEEP
csshtmlborder
Will
Will

Reputation: 33

<div> height not expanding with content. Setting "height: auto" removes borders

I have a webpage that's a set height with blue borders on each side and the bottom. This webpage has a Facebook comment box, and I notice after a certain amount of comments, the comments exceed beyond my webpage below my footer. It does this because the more comments added to a web page, the longer the webpage gets. And since my webpage had a set height comments began to run off the page. The simple solution to this would be to style the div height to auto or don't set a height at all. I did that and for some reason when I do that my web page borders disappear. My question is how do I get my webpage to extend with the facebook comments without my borders disappearing.

#bodywrap {
width: 910px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #9FD6E1;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9FD6E1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9FD6E1;
height: 2025px; /*if i set this to auto my borders disappear*/

Upvotes: 0

Views: 4588

Answers (3)

Christopher Marshall
Christopher Marshall

Reputation: 10736

Insert a <div style="clear:both;"></div> after the <div id="sidenav"></div> tag and you will be fine.

Both of the inner divs of bodywrap are being floated and thus, out of the document flow.

Upvotes: 2

No Results Found
No Results Found

Reputation: 102755

It's a rare case that you want to set an explicit height on an element in CSS, especially the entire page. There are more things than just the amount of content that can contribute to the overflow (user font settings, size of viewport, etc.). I see this as a common "newbie" mistake, most of the time you want to let the content dictate the height of the container, perhaps using a min-height if necessary.

  1. Remove the hardcoded height
  2. Try a clearfix on the #bodywrap element. Sometimes you need this to make background and borders appear to wrap the contents when there are floated elements.

If step 2 doesn't help, I can assure you that step 1 is still important (unless you want scrollbars on the element or content overflow).

Not related:

You can condense the CSS for the borders down to this, using shorthand:

border:1px solid #9FD6E1;
border-top:0;

See: http://www.sitepoint.com/introduction-css-shorthand/

Upvotes: 0

Yule
Yule

Reputation: 9764

To get scrollbars for just a particular div use:

overflow-y: scroll

in your css as well as height. That should work fine

Upvotes: 0

Related Questions