MasterACE14 Posted September 2, 2011 Share Posted September 2, 2011 I'm trying to get the Right Column div(Page Content) to take up all the remaining space on the right of the Left Column Div(Navigation menu). If I specify exact pixel width for the Right Column Div, it does stay to the right of the Left Column Div but for some reason there is overflow. div#main_content { width: 100%; margin: 0px auto; min-height: 100%; height: 100%; padding-top: 16px; } div.leftcol { width: 208px; border-right: #BAA533 2px solid; border-bottom: #BAA533 2px solid; background-color: #2c2c2c; min-height: 600px; float: left; } div.rightcol { width: 100%; margin-left: 14px; float: left; overflow: hidden; } <div id="main"> <div class="leftcol"> <p>Left Column Content</p> </div> <div id="main_content"> <div class="rightcol"> <p> some content in here.................................. etc etc </p> </div> </div> </div> Any help is appreciated, thanks! Quote Link to comment Share on other sites More sharing options...
sunfighter Posted September 2, 2011 Share Posted September 2, 2011 First get rid of div id="main_content Then start here: <html> <head> <style type="text/css"> #main{ width: 800px; margin: 0px auto; padding-top: 16px; } .leftcol { width: 208px; border-right: #BAA533 2px solid; border-bottom: #BAA533 2px solid; background-color: #2c2c2c; min-height: 600px; float: left; } .rightcol { width: 568px; margin-left: 14px; float: left; overflow: hidden; } </style> </head> <body> <div id="main"> <div class="leftcol"> <p>Left Column Content</p> </div> <div class="rightcol"> <p> some content in here.................................. etc etc </p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
MasterACE14 Posted September 3, 2011 Author Share Posted September 3, 2011 this is roughly how I want it to look: which the following code does <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } #main{ width: 100%; margin: 0px auto; padding-top: 16px; background-color: #000; } .leftcol { width: 208px; border-right: #BAA533 2px solid; border-bottom: #BAA533 2px solid; background-color: #2c2c2c; min-height: 600px; float: left; } .rightcol { width: 88%; background-color: #DDD; margin-left: 14px; float: left; overflow: hidden; } </style> </head> <body> <div id="main"> <div class="leftcol"> <p>Left Column Content</p> </div> <div class="rightcol"> <p> some content in here.................................. etc etc </p> </div> </div> </body> </html> However if someone has a smaller resolution or reduce the browser window size, the right column gets pushed beneath it like this... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.