CODEWITHSUNDEEP
cssheighthtml
Ty Morton
Ty Morton

Reputation: 733

CSS: 100% Height Issues

I know that there have been a number of posts regarding the height:100% declaration in CSS, yet none of them have resolved the issue I'm struggling with.

In a nutshell, this is what I'm facing: http://cornerstonearts.hostasaurus.com/about/cornerstone_history

All of the height settings for the elements and container divs – html, body, #static-content, #sidebar, #static-maincontent – are 100%:

html {
height: 100%;
}

body {
background-color:#d5af6a;
margin:0;
height: 100%;
}

#static-content {
width:960px;
background-color:#FFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: 100%;
overflow-y: visible;
}

#sidebar {
width:320px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
overflow-y: visible;
}

#static-maincontent {
width:600px;
position: absolute;
left: 340px;
top: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
height: 100%;
overflow-y: visible;
}

I read a couple of posts that suggest the problem might be the use of absolute positioning. I didn't see how that could be the cause. If a DIV is absolutely positioned, it should still expand to accommodate its contents.

Nevertheless, using Firebug, I changed all of the elements to be positioned relatively and had the sidebar and main columns float left. I still had the same problem.

This is one of those things that I'm sure must have a simple solution that I'm just not seeing. After all, how hard can it be to have a page element expand to 100% of the height of its container?

Any help would be appreciated.

Thanks!

Upvotes: 0

Views: 5297

Answers (3)

PREEB
PREEB

Reputation: 1362

I believe this will actually solve your problem. http://jsfiddle.net/AVRMy/1/

I got rid of:

overflow-y: visible;
height: 100%;

from all your CSS. Then added:

        <div style="clear: both; width: 100%;"></div>

right after the closing tag for the div static-maincontent.

Upvotes: 0

Vivek Chandra
Vivek Chandra

Reputation: 4358

change the following in your css ( tested it using firebug - works ) -- 

#static-content {
width: 960px;
background-color: white;
margin:0 auto;
position: relative;
height: auto;
overflow: hidden;
}
#sidebar {
width: 320px;
height: 100%;
overflow-y: visible;
float: left;
}
#static-maincontent {
width: 600px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
overflow-y: visible;
height: 100%;
float: left;
}

Upvotes: 0

Paul Voss
Paul Voss

Reputation: 765

An element positioned absolute doesn't affect the wrapping elements in any way. So the height of your div#static-maincontent doesn't really translate to div#static-content... it just floats above all other elements.

  • Remove all position:absolute
  • give div#sidebar a float:left
  • give div#static-maincontent a float:right
  • add something like <div style="clear:both;"> after div#static-maincontent and INSIDE div#static-content
  • remove height: 100% from div#static-content

This should work (at least with firebug).

Upvotes: 3

Related Questions