Float

[EDIT: moved from the .NET forum - Mittineague]

I have 3 DIV IDs that I refer to in my code. I want the left and right navs to sit either side of my content place holder. At the moment I do this by setting the margin-top to -650px for the right nav. Is there a easier and clearer way of doing this. I’m new to CSS and am trying to stay clear of absolute and relative positions for the time being as someone suggested trying to use the normal page flow and jsut use margins when I want to offset things.

Can anyone help?

Thanks

#MasterLeftNav
{
margin-left:5px;
float: left;
color:White;
width: 140px;
height:650px;
background-color: #29888B;
border-right: 3px solid white;
}

#MasterContentPlaceHolder
{
margin-left:140px;
width:935px;
background-color:#E4E0E0;
height:650px;
overflow:auto;
}

#MasterRightNav
{
margin-right:5px;
margin-top: -650px;
float: right;
color:White;
width:140px;
height:650px;
background-color: #29888B;
border-left: 3px solid white;
}

This is .NET, CSS is thataway —>

:wink:

I’d do something like this:

		#wrapper {
			width: 1240px;
		}
		#MasterLeftNav {
			margin-left: 5px;
			float: left;
			color: White;
			width: 140px;
			height: 650px;
			background-color: #29888B;
			border-right: 3px solid white;
		}
		#MasterContentPlaceHolder {
			float: left;
			width: 935px;
			background-color: #E4E0E0;
			height: 650px;
			overflow: auto;
		}
		#MasterRightNav {
			margin-right: 5px;
			float: left;
			color: White;
			width: 140px;
			height: 650px;
			background-color: #29888B;
			border-left: 3px solid white;
		}

	<div id="wrapper">
		<div id="MasterLeftNav">
		</div>
		<div id="MasterContentPlaceHolder">
		</div>
		<div id="MasterRightNav">
		</div>
	</div>

Oh, I would also ditch the heights on the DIVs and use faux columns instead.

Oh - thank you very much for your q

ooops. Meant to say… thanks very much for your quick response. Is much appreciated. One last question - what are faux columns?

Thanks again

Type it in google. You’ll find a better explanation than I can give.

See http://www.alistapart.com/articles/fauxcolumns/ for a full explanation.

In a nutshell, it’s when you set a background image on the page (or parent container), and that background image has two/three coloured/patterned columns that stretch or repeat all the way down, and you then line up your actual columns (without any background colour or image) to site over each of the colours on the page background image, so that it looks as though you’ve given each column a coloured background.

As mentioned above you will very rarely set heights on text containers as the content should dictate the height. Otherwise the layout can never grow and content will break out when test is resized.

Equal columns is something that css doesn’t do easily unless you just want modern browser support and then you can use the display:table properties.As mentioned above Faux columns are an easy solution for fixed width sites. (There are other more complicated solutuons that don’t involve images but most are best avoided and instead keep things simple.)

Thanks - will do.