?
Solved

div background color with only floating elements

Posted on 2005-03-27
3
Medium Priority
?
435 Views
Last Modified: 2008-03-06
I have a div which I want to contain a link navigation bar on the left and a date on the right.  A standard div will resize with the browser width which is exactly what I want.  So I created floated list items for the links on the left and a float:right element for the date.  This works.

The problem is that the bar's background color does not show up and this produces a big 'hole' in the middle of the bar where the page background color shows through.  This is related to the fact that there is no non-floated element in the div.  If I put in an   I get a background which is only partially the height of the floated elements.

I'm looking for a CSS (IE + Gecko) way to naturally (without javascript) give the div a height that matches the floated elements so that the div background color will show through and complete the empty space of the bar.

Below is my sample test code:

<html>
<style>
div#linkbar {
    background-color: #2B6799;
}
div#linkbar ul {
    background-color: #ffffff;
    margin: 0px;
    padding: 0px;
}
div#linkbar li {
    background-color: #2B6799;
    color: #ffffff;
    list-style: none;
    padding: 5px 20px 5px 20px;
    margin: 0px 1px 0px 0px;
    float: left;
}
div#linkbar li.right {
    float: right;
}
</style>
<body>

<div id="linkbar">
    <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li class="right">Date</li>
    </ul>
</div>

</body>
</html>
0
Comment
Question by:phasevar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13640939
You could try to put in float:left on your div

div#linkbar {
    background-color: #2B6799;
    float:left;
}

if it fit into your design.
0
 

Author Comment

by:phasevar
ID: 13640977
Worked like a charm!  Thank you!
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13640979
Glad I could help!

Batalf
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month12 days, 7 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question