Positioning 3 divs side by side with sides fixed width

HTML & CSS
1

I have three columns. They all need to be side by side on a page, taking up the entire width.

The center can expand as much as it wants. But the two side divs need to remain 200 pixels wide each at all times.

How is this done?

So far I have

#myleft{
position:relative;
float:left;
width:200px;
background-color:#CC6600;
}
#mycenter{
position:relative;
float:left;
background-color:#FFCC00;
width:auto;
}
#myright{
position:relative;
float:right;
width:200px;
background-color:#FF6633;
}

and the 3 columns are laid out like this:

<div id=‘myleft’>left content</div>
<div id=‘mycenter’>center</div>
<div id=‘myright’>right content</div>

But the center column does not take up the whole center of the page.

2

Hi,

You can float the right and left and just position the middle one with margins as follows. (Although the floated content must come first in the html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#myleft{
position:relative;
float:left;
width:200px;
background-color:#CC6600;
}
#mycenter{
position:relative;
margin:0 201px 0 201px;
background-color:#FFCC00;
}
* html #mycenter{height:1%}/*defeat ie 3 pixel jog*/
#myright{
position:relative;
float:right;
width:200px;
background-color:#FF6633;
}

</style>
</head>
<body>
<div id='myleft'>left content</div> 
<div id='myright'>right content</div> 
<div id='mycenter'>center</div> 
</body>
</html>

Another way is to place the left and right coumns absolutely and you can have content first. This does rely on the fact that you won’t be able to place a footer under absolutely placed columns.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{margin:0;padding:0}
#myleft{
position:absolute;
left:0;
top:0;
width:200px;
background-color:#CC6600;
}
#mycenter{
position:relative;
margin:0 201px 0 201px;
background-color:#FFCC00;
}
#myright{
position:absolute;
right:0;
top:0;
width:200px;
background-color:#FF6633;
}
</style>
</head>
<body>
<div id='mycenter'>center</div>
<div id='myleft'>left content</div>
<div id='myright'>right content</div>
</body>
</html>

Hope that helps.

Paul

3