How do I make 1 div fixed and another %?

richard_ray · 26 May 2006, 07:48 AM

I have the following code for a page which I am playing around iwth for a new site format:

Code:

<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, 08:44 AM

The #main div needs to follow the #container_right in the html.

See http://www.wickham43.supanet.com/for...ray060526.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>

Thread: How do I make 1 div fixed and another %?

Thread Tools

How do I make 1 div fixed and another %?

Posting Permissions