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

Apr 25th, 2011, 02:37 PM

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">
<td bgcolor="#0000FF">&nbsp;</td>
<td width="600" bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>

Thanks in advance and waiting for your reply

Apr 25th, 2011, 03:11 PM

Apr 25th, 2011, 03:14 PM
something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<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;
<script type="text/javascript"></script>
<div id="wrapper">
<div id="content">
<div id="col1">COLUMN 1</div>
<div id="col3">COLUMN 3</div>
<div id="col2">COLUMN 2</div>

Apr 25th, 2011, 04:35 PM
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!