3 replies [Last post]
rvdokkum
Offline
newbie
Amsterdam
Last seen: 10 years 27 weeks ago
Amsterdam
Timezone: GMT+2
Joined: 2011-05-22
Posts: 1
Points: 2

how do i make a 3 colom layout. using div's and css style.
with a centered middle colum of a fixed with of 800px
and the left and right collumns filling the space on left and right.

thanks in progress

Remko van Dokkum

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 7 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Do the left and right columns

Do the left and right columns have any content? Just to be clear, a background image is not content.

homestar1
homestar1's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Timezone: GMT-7
Joined: 2011-05-27
Posts: 5
Points: 6

Two Solutions

There's more than one way to do it!

First, check out this link: http://www.dynamicdrive.com/style/layouts/category/C10/

Next, I hacked together a little code for you (I've been working on something similar, yet a little more complex.) I commented generously and made it as straightforward as possible. Although, as I've found with CSS, once you start monkeying around with things, the whole design can go haywire.

Basically, you make a wrapper div (100% width) to hold three column divs. Then you float one left, one right, and center the middle one with the following code:

margin: 0 auto;

There is a little hack for some versions of IE that don't support that, and I've included it. Feel free to use it as you wish.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Column Layout</title>
 
<style type="text/css">
body {
	/* Zero out any space in the browser window */
	margin: 0px;
	padding: 0px;
 
	text-align: center;  /* IE hack to center the content div--you'll need to override it in the content div */
}
 
#wrapper {
	/* Set the wrapper to occupy the entire browser width */
	width: 100%;
 
 
	/* So you can see it in action */
	height: 400px;
 
}
 
#leftcol {
	float: left;
 
	/* So you can see it in action */
	background: #FFFFFF;
	height: 400px;
 
}
 
#rightcol {
	float: right;
 
	/* So you can see it in action */
	background: #FFFFFF;
	height: 400px;	
 
}
 
#maincol {
	/* This sets the width of the middle column */
	width: 800px;
 
	/* This is the key line that centers the middle column--it's buggy in certain versions of IE though. */
	margin: 0 auto;
 
	/* Override IE hack */
	text-align: left;
 
	/* So you can see it in action */
	background: #000000;
	height: 400px;
 
}
 
</style>
 
</head>
 
<body>
 
<div id="wrapper">
	<div id="leftcol">&nbsp;</div>
	<div id="rightcol">&nbsp;</div>
	<div id="maincol">&nbsp;
    </div>
</div>
 
</body>
</html>

homestar1
homestar1's picture
Offline
newbie
Last seen: 10 years 24 weeks ago
Timezone: GMT-7
Joined: 2011-05-27
Posts: 5
Points: 6

Supplement

By the way, I think you might mean: "thanks in advance."