Reputation: 2190
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;}
Upvotes: 0
Views: 141
Reputation: 2190
If anyone else runs into the same problem, I found this simple clearfix http://nicolasgallagher.com/micro-clearfix-hack/
Upvotes: 0
Reputation: 13360
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.
Upvotes: 2
Reputation: 681
Try setting a Max-height on it, if that doesnt work try using just height and width
Upvotes: 0