homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
3 Section Header
LinusIT



 
Msg#: 4380033 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4380033 posted 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

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



 
Msg#: 4380033 posted 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#: 4380033 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4380033 posted 11:25 am on Oct 28, 2011 (gmt 0)

No problem, you're very welcome, ;)

Global Options:
 top home search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved