Welcome to WebmasterWorld Guest from 54.197.94.141

Forum Moderators: not2easy

Message Too Old, No Replies

3 Section Header

   
7:44 am on Oct 27, 2011 (gmt 0)



I'm trying to create a 3 section header but am having some difficulty. The left and the middle are displaying correctly (near enough) but the right section is displaying below the other two. Hopefully some code might explain a little better.

CSS

#header-left {width: 160px; float:left; }
#header-right {width: width:90px; float:right;}
#menu {margin:0 auto; width:660px;}


HTML

<div id="header-left">
<ul>
<li><a href="#" class="active"></a></li>
<li><a href="#" class="inactive"></a></li>
</ul>
</div>
<div id="menu">
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="/dev/">Home</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="/dev/contact-details.php">Contacts</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="/dev/diary/">Diary</a>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="#" class="settings"></a></li>
<li><a href="#" class="logout"></a></li>
</ul>
</div>
<div class="clear"></div>


Any ideas?
10:43 am on Oct 27, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there LinusIT,

the "#header-right" element must take precedence...


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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
min-width:980px; /* this will prevent "#menu# from sliding under "#header-left" */
}
#header-right {
width:90px;
float:right;
}
#header-left {
width:160px;
float:left;
}
#menu {
width:660px;
margin:auto;
}
</style>

</head>
<body>

<div id="header-right">
<ul>
<li><a href="#" class="settings"></a></li>
<li><a href="#" class="logout"></a></li>
</ul>
</div>

<div id="header-left">
<ul>
<li><a href="#" class="active"></a></li>
<li><a href="#" class="inactive"></a></li>
</ul>
</div>

<div id="menu">
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0"
href="/dev/">Home</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0"
href="/dev/contact-details.php">Contacts</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0"
href="/dev/diary/">Diary</a>
</ul>
</div>

<div class="clear"></div>

</body>
</html>

birdbrain

[edited by: alt131 at 11:55 am (utc) on Nov 2, 2011]
[edit reason] Side Scroll [/edit]

4:13 pm on Oct 27, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



But aren't you supposed to put left floats first in the source code? (maybe it's just a habit I fell into and forgot why.) In any case per birdbrain's solution and your original problem, you might see it work if you put the right div anywhere above #menu. Floats come first.
11:19 am on Oct 28, 2011 (gmt 0)



I always thought you would put the left float first but obviously not. By putting the right float before the left it's now displaying properly.

Thanks you
11:25 am on Oct 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome, ;)