0

I'm trying to set the size of my wrapping div to be atleast the height of the page and then adjust according to the content if it overlaps.

What I have right now is min-height:100%; but this doesn't exceed page height when content exceeds it.

What is the best way to fix this?

EDIT: Here's my relevant CSS.

#wrapper{width:1000px;min-height:100%;margin:0px auto;background:#F2F2F2;}

header{width:1000px;height:50px;margin:0px auto;}

h1#logo{float:left;margin:5px 5px 0px;padding:0px;font:bold 30px 'Russo One', sans-serif;line-height:32px;}
h1#logo a, h1#logo a:visited{text-decoration:none;color:#005883;}
h1#logo a:hover, h1#logo a:visited:hover{color:#BAE5E9;}
img#logo-badge{vertical-align:middle;margin:-3px -5px 0px -10px;}


nav{float:right;font:20px 'Lato', sans-serif;}
nav ul{float:right;margin:0px;padding:0px;list-style:none;}
nav li{float:left;}
nav li:hover{}
nav a, nav a:visited{height:100%;padding:0px 20px 0px;display:block;text-decoration:none;color:#FFFFFF;}
nav a:hover, nav a:visited:hover{background:;color:#BAE5E9;}

#content{min-height:100%;float:left;margin:0px auto;}

#main-content{width:700px;min-height:100%;float:left;padding:0px 15px;}
#main-content h1{color:#515151;margin:0px;padding:0px;border:1px solid #515151;border-top:0px;border-right:0px;border-left:0px;}

#demo-src{border-top:1px solid #D7C7B2;border-bottom:1px solid #D7C7B2;text-align:right;}
#sidebar{width:270px;min-height:100%;float:left;}

#footer{width:100%;float:left;}
justanotherhobbyist
  • 2,124
  • 4
  • 28
  • 38
  • Are you trying to make a div that spans the height of the screen, or are you trying to match it up with another div? If you can clarify exactly what it is you are trying to do, I think we could help you better. – saluce Apr 09 '12 at 18:51
  • I *think* you have to use `html, body {height: 100%;}` for that to work. – bfavaretto Apr 09 '12 at 18:51
  • I allready have html and body to 100%, that's the wierd thing, @saluce, I want the outer div to wrap all content, right now the text in the inner divs overflows it, I want it to grow with them. – justanotherhobbyist Apr 09 '12 at 18:54
  • Can you post your HTML and CSS snippets? If you have a div within a div, the outer div should grow to match the size of the inner content. If it doesn't, there's some issue with the markup or the CSS. – saluce Apr 09 '12 at 18:56

3 Answers3

2

There's your issue. #content is floating left, which allows it to flow outside the bounds of the container div. Look at this Stack Overflow question for details on how to fix that.

Proposed answers in that question were to use jQuery EqualHeights plugin, or use Equal Height Columns for a CSS solution.

Community
  • 1
  • 1
saluce
  • 13,035
  • 3
  • 50
  • 67
  • Answers should be self-contained to stand on their own. Readers should not have to refer to other SO answers in order to see the solution. Please fix it by posting the full relevant solution within your own answer. – Sparky Apr 09 '12 at 19:32
  • I found something even easier on google, http://nicolasgallagher.com/micro-clearfix-hack/ solved it fine. Never understood the use of clearfix until now. – justanotherhobbyist Apr 09 '12 at 20:02
0

Try setting a Max-height on it, if that doesnt work try using just height and width

Brad Fox
  • 685
  • 6
  • 19
0

If anyone else runs into the same problem, I found this simple clearfix http://nicolasgallagher.com/micro-clearfix-hack/

justanotherhobbyist
  • 2,124
  • 4
  • 28
  • 38