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

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 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved