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! Link to comment https://forums.phpfreaks.com/topic/246245-right-column-div-keeps-hiding-under-the-left-column-div/ 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> Link to comment https://forums.phpfreaks.com/topic/246245-right-column-div-keeps-hiding-under-the-left-column-div/#findComment-1264837 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... Link to comment https://forums.phpfreaks.com/topic/246245-right-column-div-keeps-hiding-under-the-left-column-div/#findComment-1265009 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.