3 coloumns, 2 floats and one margin?

**znebojsa** · Sep 7, 2007 23:29

Hi im trying to make a simple 3 col layout:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>

<div id="wrapper">

	<div id="banner">
		<img src="images/banner.jpg" alt="banner">
	</div>

	<div id="left">
	hi
	</div>

	<div id="mid">
	hi
	</div>

	<div id="right">
	hi
	</div>

</div> <!-- end wapper -->

</body>
</html>

Code:

*
{
margin: 0;
padding: 0;
}

body
{
font: 100.01%/1.17 Arial, Helvetica, sans-serif;
background-color: #212020;
color: #FFFFFF;
}

#wrapper
{
width: 800px;
margin: 0 auto;
background-color: #2E2E2E;
}

#banner img
{
width: 800px;
height: 150px;
}

#left
{
width: 150px;
float: left;
}

#mid
{
width: 500px;
margin: 0 auto;
}

#right
{
width: 150px;
float: right;
}

I thought using two floats and a auto margin would work.
However the third 'hi' the one in the right div, jumps onto the next line and isnt even in the wrapper's backgrounf color. What am i doign wrong?

thanks

**markbrown4** · Sep 7, 2007 23:54

Hello,

For that model of 2 floats and 1 static column - The floats need to be first.
So the order in the markup is:
Left
Right
Middle

But, IE6' 3px jog (see FAQ on floats) causes the column to drop anyway.

Because you're model is fixed width just float everything left.

Code:

#left {
	width: 150px;
	float: left;
}
#mid {
	width: 500px;
	float: left;
}
#right {
	width: 150px;
	float: left;
}

Hope it helps

**znebojsa** · Sep 8, 2007 00:18

Hey

When I do that the divs are in the right position, however, they dont take the background color of the wrapper?

**markbrown4** · Sep 8, 2007 01:32

Hi,

Because everything is floated - You'll need to clear them,
setting width: 100%; on the wrapper would clear them in IE.
Setting overflow: auto on the wrapper will clear them in most other browsers.
There's other clearing techniques in the FAQ.

User Tag List

Thread: 3 coloumns, 2 floats and one margin?

Thread Tools

Display

3 coloumns, 2 floats and one margin?

Bookmarks

Bookmarks

Posting Permissions