How do I expand my main div to fill remaining space, using a two column CSS model?
-
I have a simple two column layout, with a left side menu bar div of fixed width, and a right side main content div. I need the main div to expand to fill any remaining space to the right of the menu div. However, when I make the content div 100%, it assumes 100% width of it's parent, which includes the left menu div. It therefore extends beyond the visible space on the right side of the screen. If I remove the float attribute from the main, my left padding on the main div is ignored. How can I get the main div sized to whatever dimension or percentage of space is not occupied by the menu div? I realise I could do some JS voodoo here, but surely there is a fairly simple CSS/HTML solution?
-
I have a simple two column layout, with a left side menu bar div of fixed width, and a right side main content div. I need the main div to expand to fill any remaining space to the right of the menu div. However, when I make the content div 100%, it assumes 100% width of it's parent, which includes the left menu div. It therefore extends beyond the visible space on the right side of the screen. If I remove the float attribute from the main, my left padding on the main div is ignored. How can I get the main div sized to whatever dimension or percentage of space is not occupied by the menu div? I realise I could do some JS voodoo here, but surely there is a fairly simple CSS/HTML solution?
Try this style sheet with divs below it.... <style type="text/css"> body { margin:0px; padding:0px; color:#000; background:#fff; height:100%; } #left { position:absolute; left:0px; top:0px; padding:0px; width:200px; height:100%; background:#eaeaea; border:1px solid #333; } .content { position: relative; margin-left:220px; background:#ffc; border:1px solid #333; padding:10px; } </style> <div id="left"> Menu in here. Fixed width. </div> <div class="content"> <h1>Main content here. 100% liquid width.</h1> </div>