0

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*/
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Will
  • 33
  • 2
  • 8
  • It would be a very good idea to provide your website if you can, but that is up to you. Otherwise, you'll have an answer soon. – nmagerko Jan 05 '12 at 22:57
  • 1
    Don't just link to external websites, post the HTML code here. When you fix the live website, we'd be left with nothing, and no way to reproduce or understand the problem. – Wesley Murch Jan 05 '12 at 23:06

3 Answers3

2

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.

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
0

To get scrollbars for just a particular div use:

overflow-y: scroll

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

Yule
  • 9,668
  • 3
  • 51
  • 72
0

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/

Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228