Percentage - Px Problem

Rommeo · 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.

haku · October 29, 2009

google 3-column css layouts. There are many, many tutorials on the matter.

Sign In

Percentage - Px Problem

Recommended Posts

Rommeo

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information