Hi all excluding the header and footer for the time being I want my web page to have a simple left menu and then a content section using div's, I also have a 'gap' div in between the 'leftMenu' div and the 'content' div. My problem is that I want my 'leftMenu' and 'gap' to be of fixed width and then I want my content section to be a precentage width to the edge of the screen. but when i set it to 100% it goes further then the edge of the page because it excludes the space that the 'left menu' and 'gap' div's take up. What can I do to get the 'content' div to go to the edge of the screen and shrink when I shorten the screen while the other two div's stay fixed size?? I'm using 'position:absolute' and 'left:' positioning....heres the code below help would be so much appreciated <------------------------------------CSS-----------------------------> #leftMenu { background: #af44af; height: 500px; position : absolute; left : 0; width : 200px; } #content { background: #fff1ff; height: 500px; position : absolute; left : 230px; width: 800px; min-width: 400px; } #gap { background: #fff1ff; position : absolute; height: 500px; left : 200px; width: 30px; } <---------------------------------html-----------------------> <body> <div id="leftMenu"></div> <div id="content"></div> <div id="gap"><img src="corner.jpg" /></div> </body>
You don't need an extra div to act as a separator between the menu and content. Use a margin. Also, float the menu and content: #menu { float: left; margin-left: 30px; width: 170px; } #content { float: left; width: 800px; } Code (markup): If you want the content to be a % away from the right hand side of the screen, try position relative and setting right: 10%; (or whatever % you want). #content { float: left; position: relative; right: 10%; width: 800px; } Code (markup): Hopefully that helps.