Help positioning nested DIVs [Archive]

essdeeay

01-12-2006, 03:09 AM

Hello,

I want to line up 6 navigation buttons equally spaced, and am using the div tag to achieve this. However, to get the buttons to sit next to each other I have to use the float:left property, but in doing so the buttons jump out of the main div.

See here for example: http://www.rowyerboat.com/

If I take the float property out of "navbutton", it jumps back in the div, but all the button divs stack up vertically.

And it also doesn't centre in IE.

Many thanks for any help,
Steve :)

mark87

01-12-2006, 11:27 AM

Firstly that doctype is not a full doctype so IE is in quirks mode - which solves the centering problem.

The second problem is the header is 640px but 640 doesn't divide by 6 so the nav buttons won't reach the full length.

The buttons jumping out the div is caused by the the floats not being cleared so you need a clearing div at the end.

That said, maybe this will help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">

.main {
margin: 0 auto;
width: 700px;
border: 1px dotted green;
}

#head { width: 640px; margin: 0 auto; }

.navbar {
margin: 0 auto;
width: 640px;
border: 1px dotted blue;
}

li {
float: left;
width: 104px;
border: 1px dotted red;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#clear { clear: both;}
</style>

<title>Rowyerboat.com</title>
</head>

<body>

<div class="main">
<div id="head"><img src="http://www.rowyerboat.com/logo.png" alt="Rowyerboat.com"></a></div>

<div class="navbar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

<div id="clear"> </div>

</div>

</body>
</html>