PDA

View Full Version : Yet another DIV layout question...

essdeeay
03-06-2007, 01:57 AM
What I'm basically trying to do here is a simple DIV layout, but all within a wrapper so the whole thing centers itself vertically in the browser.

If you look at the following code in IE, the DIVs are in the right place, but it doesn't center. If you look at it in Firefox, it centers ok, but the blue DIV drops out of the wrapper.

Is there a way I can fix this, and be cross-browser compliant at the same time?

Many thanks,
Steve

<html>

<head>
<title>Test page</title>

<style type="text/css" media="screen">
<!--
#wrapper { border: 1px red solid; width: 740px; margin: 0px auto; }
#title { border: 1px purple dotted; width 740px; margin: 0px auto; }
#navigation { border: 1px blue dotted; width: 125px; margin: 0px 0px 125px 0px; float: left; }
#content { border: 1px green dotted; position: relative; }
-->
</style>

</head>

<body>

<div id="wrapper">
<font color="red">This is the page wrapper, which should enclose all content</font>

<div id="title">
<font color="purple">This is where the title will go</font>
</div>

<div id="navigation">
<font color="blue">This is the navigation pane</font>

</div>

<div id="content">
<font color="green">This is the content pane</font>
</div>

</div>
</body>

</html>
jlhaslip
03-06-2007, 03:34 AM
This works in IE6, IE7, FF2 and I believe it will works in most other Browsers as well.

You were quite close. The navigation div is moved up above the title div. Because it is floated, it needs to be before the title and content div's. I gave the title and content div's a margin-left wider than the fixed width navigation, removed the font tags, and added a xhtml strict Doctype.

Those font tags are 90'ish and deprecated. Check this page to see how colours (CDN) can be inserted into the style tags (embedded) rather than the in-line font tags.
Hope this helps you understand the "div thing".

*edit*

And did you mean centre the page <== Horizontally==> ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Test page</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="keywords" content="keywords list here, comma seperated" />
<meta http-equiv="description" content="insert a description here." />
<link rel="stylesheet" type="text/css" href="style_file_here.css" />

<style type="text/css" media="screen">
<!--
#wrapper { border: 1px red solid; width: 740px; margin: 0px auto; color:red;}
#title { border: 1px purple dotted; width 740px; margin-left: 130px; color:purple;}
#navigation { border: 1px blue dotted; width: 125px; float: left; color:blue; }
#content { border: 1px green dotted; position: relative; margin-left: 130px; color:green; }
p { margin: .25em .5em; }
-->
</style>

</head>

<body>

<div id="wrapper">
<p>This is the page wrapper, which should enclose all content</p>

<div id="navigation">
<p>This is the navigation pane</p>

</div>

<div id="title">
<p>This is where the title will go</p>
</div>


<div id="content">
<p>This is the content pane</p>
<p>This is the content pane</p>
</div>

</div>
</body>
</html>