...

View Full Version : design with 3 columns (non standard)



PHP6
04-25-2011, 02:37 PM
Hello,

Can anyone tell me if there is any way to make similar design with pure DIV and CSS? As you can see the whole design contains 3 columns. The center one has fixed size 600 px and it is located in the center of a page. The left and right ones are stretched to the max allowed width.


<table width="100%" border="1">
<tr>
<td bgcolor="#0000FF">&nbsp;</td>
<td width="600" bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
</tr>
</table>

Thanks in advance and waiting for your reply

harbingerOTV
04-25-2011, 03:11 PM
http://www.gunlaug.no/tos/moa_27a.html

bullant
04-25-2011, 03:14 PM
something like this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid black;
}
#content {
width: 100%;
position: relative;
}
#col1 {
float: left;
width: 16%;
border: 1px solid red;
}
#col2 {
margin: 0px auto 0px auto;
width: 66%;
border: 1px solid blue;
}
#col3 {
float: right;
width: 16%;
border: 1px solid red;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="col1">COLUMN 1</div>
<div id="col3">COLUMN 3</div>
<div id="col2">COLUMN 2</div>
</div>
</div>
</body>
</html>

PHP6
04-25-2011, 04:35 PM
http://www.gunlaug.no/tos/moa_27a.html
That's exactly what I was looking for! Thank you very much.


something like this
That's not right solution since you have fix size for left and right columns. % is not a solution since center column should have fixed size (600 px). But thank you anyway for your time and will to help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum