Simple problem with two div containers?

My design involves two div containers (menu and contents) next to each other, so that menu is fixed width, and contents expand horizontally to fill all remaining space in the browser's window.

I've typed up the following CSS code:

#menu { float:left; width:120px; }

#contents { float:left; }

And HTML:

<div id="menu">...</div>

<div id="contents">...</div>

The containers are next to each other, but 'contents' is only the size of the text inside it (visible with some background). By applying width:100% it moves below the menu which obviously I do not want.

Any ideas please?

I do not wish to use any JavaScript.

3 Answers

Relevance
  • 10 years ago
    Favorite Answer

    Set a width on the #menu as a percentage. Set a width on the content that is 100 - width_of_menu.

    You may also be able to coax this into working by setting the height of the menu to 100%, but there's an equal likelihood that it will turn into overflow.

    CSS3 will have real columns:

    http://www.w3.org/TR/css3-multicol/

    • Login to reply the answers
  • 10 years ago

    Have seen this problem with my own coding. My suggestion is to set the width of the #contents to a percent less than 100. The 100% is of the entire view port. However, if you are using a 1280px wide monitor, the div might slip down below #menu if the page is viewed on a 1024px wide. You can get around this by setting both widths in percentage. #menu perhaps as 10% and the #content perhaps as 86%. Why not 100% --- because of overhead of the browsers.

    Or, try this with the width you have for #menu. Remove the float: left from #content and set, for this div, margin-left: 130px; This will permit the div to pass the #menu and set the width: to some percent that works.

    • Login to reply the answers
  • 4 years ago

    I'm not exactly sure what you're trying to do with the Products div, as you're floating right, but setting the left margin to 0. Here's what I was able to come up with: <HTML> <HEAD> <TITLE>Sample</TITLE> <style type="text/css"> <!-- DIV.Products { height: 400px; width: 180px; background-color: #ffb6c1; padding: 3px 3px 3px 3px; margin: 2px; border: 3px 3px 3px 3px; border-style:solid; border-color:#a52a2a; display: block; float: right; } --> </style> </HEAD> <BODY> <center> <DIV style="background-color: #FF0000; color: Black; position: center; width: 1000px; height: 80px; padding: 5px; padding-right: 20px;"> First Div </DIV> <div style="background-color: #00FF00; color: Black; position: center; top: 80px; width: 1000px; height: 30px; padding: 5px; padding-right: 20px;"> Second Div </div> <DIV style="background-color: #0000FF; color: Black; position: center; top: 110px; width: 1000px; height: 100%; padding: 5px; padding-right: 20px;"> <div class="Products">Products</div> Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test </DIV> </center> </BODY> </HTML>

    • Login to reply the answers
Still have questions? Get your answers by asking now.