3 Section Header

Forum Moderators: not2easy

Message Too Old, No Replies

3 Section Header

LinusIT

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?

birdbrain

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

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]

rocknbil

4:13 pm on Oct 27, 2011 (gmt 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.

LinusIT

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

birdbrain

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

No problem, you're very welcome, ;)

3 Section Header

LinusIT

birdbrain

rocknbil

LinusIT

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week