justanotherhobbyist
justanotherhobbyist

Reputation: 2190

Div height CSS trouble

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

Answers (3)

justanotherhobbyist
justanotherhobbyist

Reputation: 2190

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

Upvotes: 0

saluce
saluce

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

Brad Fox
Brad Fox

Reputation: 681

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

Upvotes: 0

Related Questions