Welcome to WebmasterWorld Guest from 107.22.66.11

Forum Moderators: not2easy

Message Too Old, No Replies

3 Section Header

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

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts:970
votes: 23


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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)

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 970
votes: 23


No problem, you're very welcome, ;)