CSS, Div, and Float... OH MY!

JediBMC · Dec 1, 2005

I am trying to create a site with a fixed width format.(please don't comment on the pros/cons of fixed width formats!) After much frustration, I have finally have my 3 column format looking the way I want. But now I am having another problem. For some reason, my container division seems to be aligning to the right instead of being centered.

What am I doing wrong? (Please be gental, I am VERY new to using CSS instead of tables for layout!)

CSS Text:

Code:

html		{text-align: center}
body		{background-color:#FFFFFF}
div		{display:block; border-width:1px}

/* Positions */

.mainbody	{position:relative; margin: 10px 10px 10px 10px; clear:both}
.row1		{position:absolute; top:0px;}
.row2		{position:absolute; top:70px;}
.row3-1		{position:absolute; top:102px; margin:0px 590px 0px 0px; float:left;}
.row3-2		{position:absolute; top:102px; margin:0px 140px 0px 140px;}
.row3-3		{position:absolute; top:102px; margin:0px 0px 0px 592px; float:right;}

/* Dimensions */

.mainbody	{width:730px; height:550px;}
.row1		{width:730px; height:70px;}
.row2		{width:730px; height:30px;}
.row3-1		{width:138px; height:446px;}
.row3-2		{width:450px; height:446px;}
.row3-3		{width:138px; height:446px;}

/* General Formatting */

.mainbody	{text-align:center;}
.row1		{background-color:#000099; text-align:center; vertical-align:middle; border-style:solid; border-color:#0005DC #000458 #000458 #0005DC;}
.row2		{background-color:#C00000; text-align:center; vertical-align:middle; border-style:solid; border-color:#FF0303 #7E0000 #7E0000 #FF0303;}
.row3-1		{background-color:#C0C0C0; text-align:center; vertical-align:top; border-style:ridge; border-color:#9D9D9D;}
.row3-2		{background-color:#FFFFFF; text-align:center; vertical-align:top; border-style:ridge; border-color:#9D9D9D;}
.row3-3		{background-color:#C0C0C0; text-align:center; vertical-align:top; border-style:ridge; border-color:#9D9D9D;}

/* Font Formatting */

.row1		{font-family:Arial; font-size:24pt; color:#FFFFFF; font-style:italic; font-weight:bold}
.row2		{font-family: "Monotype Corsiva", Corsiva; font-size:18pt; color:#FFFFFF; font-variant:normal; font-style:italic}
.row3-1		{color:#FFFFFF}
.row3-2		{color:#000000}
.row3-3		{color:#FFFFFF}

HTML Text:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>USCGAux 11NR-10-03 Flotilla</title>
<meta name="keywords" content="Coast Guard Auxiliary, USCGAux, Flotilla, Semper Paratus">
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
	<div class="mainbody">
		<div class="row1"><img border="0" src="images/USCGAuxBarLeft.gif" width="226" height="70"><img border="0" src="images/USCGAuxBarRight.gif" width="503" height="69"></div>
		<div class="row2">District 11 North Region - Devision 10 - Flotilla 03</div>
		<div class="row3-1">Buttons</div>
		<div class="row3-2">Text</div>
		<div class="row3-3">Other</div>
	</div>
</body>

</html>

-Brian-
I'm not an actor, but I play one on TV.

Vragabond · Dec 1, 2005

Oh my, indeed. How many times have you checked the page before you came up with this. I suggest you start simpler. Just make boxes on the page and color them accordingly and make them appear where you want. That's the general advice.

Now, first thing I would suggest is to remove absolute positioning. If you go with floats, you don't need absolute positioning. And you're much better off, cross browser compatibility wise. Also, don't over complicate matters. Try simple, with as little css as possible and work from there.

Second, I would suggest you use more content descriptive class names (or even ids for the structure). What is row3-3? If you ever change the layout, it would be even more confusing than it is now. Name it, #related or something, whatever content you intend to put in there.

Lastly, I would suggest grouping css of one element rather than what you're using right now. I suppose it is a styling choice but still it is pretty confusing to most people I would say.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS, Div, and Float... OH MY!

JediBMC

MIS

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor