Home/ Questions/Q 3406392
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T05:37:20+00:00

I have a two column layout: <html> <head></head> <body> <div id=container> <div id=header></div> <div

  • 0

I have a two column layout:

<html>
 <head></head>
 <body>

    <div id="container">
        <div id="header"></div>
        <div id="sidewrapper"></div>
        <div id="contentwrapper"></div>
    </div>
 </body>
</html>

I want to have both sidebar and content be 100% in height but the most top container’s min-height should be 100%.

I tried to solve it with the following css:

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Georgia, serif;
    color: #000; height:100%; min-height:100px;
}

body {
    background: #fff; height:100%; min-height:100px; overflow:hidden;   
}

#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}

#container {
    position:relative;
    width: 100%; height:100%;
    margin: auto; background:blue;
}

#contentwrapper {
    float:left;
    background:red;
    position: relative;
    width: 700px; padding:0px; margin:0px;
    height: auto; 
}

#sidewrapper {
    float:left;
    position: relative;
    width: 159px; height:100%; 
    padding:0px; margin:0px;
}

…but I get a scrollbar because of the header’s 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.

    In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.

    Now, I guess you should calculate the height of the sidebar ( = height of container – 23px), by javascript.

    • 0