3 Section Header CSS forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 54.234.231.49
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS

Forum Library : Charter : Moderator: open
CSS Forum

3 Section Header

LinusIT

msg:4380035

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

msg:4380104 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

msg:4380235 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

msg:4380615 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

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

No problem, you're very welcome, ;)

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / CSS

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

CSS Forum