Rommeo Posted October 29, 2009 Share Posted October 29, 2009 I have decided to use percentages for the size of my divs. But I have to use two fixed divs which are left and right divs. Those must be 175 and 150 px. And I want the middle div to be as long as the space between my left and right div. wrapper(95%) leftDiv(175px) || middleDiv( ?? ) || rightDiv(150px) I have these in my html file; <body> <div id="wrapper">Content for id "wrapper" Goes Here <div id="header">Content for id "header" Goes Here</div> <div id="header2">Content for id "header2" Goes Here</div> <div id="left">Content for id "left" Goes Here</div> <div id="middle">Content for id "middle" Goes Here</div> <div id="right">Content for id "right" Goes Here</div> <div id="footer">Content for id "footer" Goes Here</div> </div> </body> And my css file is as follows ; body { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #FFFFFF; padding: 0px; margin-top: 0px; margin-bottom: 0px; font-size: 12px; } #wrapper { width: 95%; background-color: #00FFFF; margin: 0px; padding: 0px; clear: both; overflow: visible; } #header { margin: 0px; padding: 0px; background-color: #0099FF; width: 100%; } #header2 { background-color: #CC9900; margin: 0px; padding: 0px; width: 100%; } #left { margin: 0px; padding: 0px; width: 175px; background-color: #999999; float: left; } #middle { background-color: #999966; padding: 0px; margin-top: 0px; margin-bottom: 0px; float: left; margin-right: 0px; margin-left: 0px; } #right { float: right; width: 150px; background-color: #999999; } #footer { text-align: center; clear: both; float: left; background-color: #FFFF00; width: 100%; } -I can not use any value for px, cause I do not know the resolution of the computer that will enter the website. -I also can not use any value for %, I do not know how many percentages left after left and right divs. I want to make a template like amazon.com's layout. I do not know if there is any easy way to do this. So How can I make my middle div cover the space between left and right div ? Thanks in advance. Quote Link to comment Share on other sites More sharing options...
haku Posted October 29, 2009 Share Posted October 29, 2009 google 3-column css layouts. There are many, many tutorials on the matter. 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.