Home/ Questions/Q 9006663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:28:22+00:00

Im having an (small) problem. Im trying to give my menu bar’s background color,

  • 0

Im having an (small) problem. Im trying to give my menu bar’s background color, the same height as my main content div, So i thought Ill give the div an 100% height, but that doesnt seem to work since there is not more content to make the div’s height higher,
I have made an example, (made in jsfiddle) with my meaning. I know this is possible, since i’ve done this before. Its an kinda easy question, but you have those days that you littarly forget anything.

   <!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <div id="boxLeft">
                menu1 </br>
                menu2 </br>
                menu3 </br>
            </div>  
            <div id="boxMid">
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
                Lorem ipsum <br />
            </div>
            <div id="boxRight">
            </div>              
        </div> 
    </body>
</html>

​

*{color:white;}
#wrapper{height:100% width:100%;}
#boxLeft{float:left; width:100px; height:100%; background-color:gray;}
#boxMid {float:left; width:400px; height:100%; background-color:blue; }
#boxRight{float:left; width:200px; height:50px; background-color:orange;}​

http://jsfiddle.net/zEest/56/

Thanks for reading,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    take a look at:

    Equal height columns

    hope this help u. By the way you could use jquery to fix the height whem dom is ready.

    $(document).ready(function(){ // event when DOM is ready.
  //sets the height of the boxes the same as the wrapper.
  $('#boxLeft, #boxRight').css('height',$('#wrapper').height());

});

    To make your wrapper the correct height use the following:

    <div id="wrapper">
        <div id="boxLeft">
            menu1 </br>
            menu2 </br>
            menu3 </br>
        </div>  
        <div id="boxMid">
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
            Lorem ipsum <br />
        </div>
        <div id="boxRight">
        </div>
         <div style="clear:both;"></div>  
    </div>

    With the css trick clear:both thre wrapper heights gets the max height of his children.

    • 0