3-col layout problem

**kateg** · Oct 3, 2006 11:17

Hi,

I'm attempting a 3 col layout for the first time, but I'm having problems with getting my right column in line with the middle and left column.

It ends up looking like this;

http://img.photobucket.com/albums/v9...muts/3-col.jpg

I'm aiming to have a left and right column of equal size, with a flash movie in the middle.

Here's my 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id= "container">
<div id= "title"><div id= "titleimage"><img src="title.jpg" alt="Revolution Soho"/></div>
</div>
<div id="leftcolheader"></div>
<div id="flashheader">
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="568" height="325" title="flash header">
<param name="movie" value="header.swf" />
<param name="quality" value="high" />
<embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="568" height="325"></embed>
</object>
</div>
<div id="rightcolheader"></div>
</div>
</body>
</html>

and here's my css

body {
background-color: #ffffff;
margin: 0;
padding: 0;
}

#container {
width: 800px;
margin: auto;
padding: 0 ;
}

#title
{
height: 64px;
background-color: #903C28;
width: 800px;
padding-top: 3px;
padding-bottom: 3px;

}

#titleimage {
width: 428px;
height: 47px;
margin-left: 7px;
margin-top: 10px;
}

#leftcolheader

{

float: left;
height: 324px;
background-color: #7C4F36;
width: 116px;
margin-top: 3px;
}

#flashheader {

margin-left: 116px;
margin-top: 3px;

}

#rightcolheader

{
float: right;
height: 324px;
background-color: #7C4F36;
width: 116px;
margin-top: 3px;
padding: 0;

}

Thanks for any help!

**stridox** · Oct 3, 2006 15:01

my way of doing a 3col is to have 2 div's using {position:absolute; left/right:0px; top:0px} and the center div to just jave margins on each side the same size as the left&right columns

**kateg** · Oct 3, 2006 16:38

Thanks a lot, this worked really well!

User Tag List

Thread: 3-col layout problem

Thread Tools

Display

3-col layout problem

Bookmarks

Bookmarks

Posting Permissions