PDA

View Full Version : How do I make 1 div fixed and another %?


richard_ray
26 May 2006, 08:48 AM
I have the following code for a page which I am playing around iwth for a new site format:


<title></title>
<style type="text/css">

body{
margin: 0;
padding: 0;
background-color: #666;
}

div#header{
width: 100%;
height: 100px;
background-color: black;
color: white;
}

div#container_main{
margin: auto;
width: 780px;
border: thin solid red;
}

div#main{
margin: 0;
width: 500px;
height: 300px;
background-color: yellow;
border: thin solid black;
float: left;
}

div#container_right{
width: 250px;
float: left;
border: thin solid white;
}

div#right1{
margin: 0;
width: 200px;
background-color: orange;
border: thin solid black;
float: left;
}

div#right2{
margin: 0;
width: 200px;
background-color: white;
border: thin solid black;
float: left;
}

div#right3{
margin: 0;
width: 200px;
background-color: green;
border: thin solid black;
float: left;
}

div#footer{
width: 100%;
height: 50px;
background-color: orange;
color: black;
}

</style>
</head>
<body>

<div id="header">This is the HEADER</div>

<div id="container_main">

<div id="main">
<p>HELLO WORLD</p>
</div>

<div id="container_right">

<div id="right1">
<p>RIGHT 1</p>
</div>

<div id="right2">
<p>RIGHT 2</p>
</div>

<div id="right3">
<p>RIGHT 3</p>
</div>

</div>

</div>


<div id="footer">This is the FOOTER</div>

</body>
</html>

I would like it so that the main window stretches to the size of the screen its being displayed on but the right column stays fixed width.

I've tried changing some of the css (changed in red) but to no avail. Any ideas?

div#container_main{
margin: auto;
width: 780px;100%
border: thin solid red;
}

div#main{
margin: 0;
width: 500px;100%
height: 300px;
background-color: yellow;
border: thin solid black;
float: left;
}
Wickham
26 May 2006, 09:44 AM
The #main div needs to follow the #container_right in the html.

See http://www.wickham43.supanet.com/forumposts/richardray060526.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{ margin: 0; padding: 0; background-color: #666; }

div#header{ width:100%; height:100px; background-color: black; color:white; }

div#container_main{ width:100%; border: thin solid red; }

div#main{ margin: 0; height: 300px; background-color: yellow; border: thin solid black; }

div#container_right{ width:250px; float:right; border: thin solid white; }

div#right1{ margin: 0; width:200px;background-color: orange; border: thin solid black; float: left; }

div#right2{ margin: 0; width:200px;background-color: white; border: thin solid black; float:left; }

div#right3{ margin: 0; width:200px;background-color: green; border: thin solid black; float:left; }

div#footer{ width:100%; height:50px; background-color: orange; color:black; }

</style>
</head>
<body>

<div id="header">This is the HEADER</div>

<div id="container_main">

<div id="container_right">

<div id="right1">
<p>RIGHT 1</p>
</div>

<div id="right2">
<p>RIGHT 2</p>
</div>

<div id="right3">
<p>RIGHT 3</p>
</div>

</div>
<div id="main"> <p>HELLO WORLD</p> </div>
</div>

<div id="footer">This is the FOOTER</div>

</body>
</html>