Home/ Questions/Q 7548699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:45:55+00:00

I know that there have been a number of posts regarding the height:100% declaration

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0