• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 442
  • Last Modified:

div background color with only floating elements

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
phasevar
Asked:
phasevar
  • 2
1 Solution
 
BatalfCommented:
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
 
phasevarAuthor Commented:
Worked like a charm!  Thank you!
0
 
BatalfCommented:
Glad I could help!

Batalf
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now