CSS - Unordered list issue - html

Question

I want to float my ul to the left and the list items to the right so that they look like this inside a div:
Item 1 Item 2 Item 3
CSS:
.body-nav {
width: 1090px;
margin: 0 auto 0 auto;
background-color: lightblue; }
.body-nav ul {
margin: 0;
padding: 0;
float: left;
list-style: none; }
.body-nav ul li {
float: right;
padding-right: 15px; }
I got the links to look how I want them to look. The problem here is I'm losing my background color. It's like these links are outside of the div.
Here is my HTML:
<header>
<div class="header-content">
<img src="images/logo.png" class="logo" alt="Site Logo">
<ul>
<li>24/7 Support [phone]</li>
<li>Manage my account</li>
</ul>
</div>
</header>
<div class="body-nav">
<ul>
<li>Web Hosting</li>
<li>Reseller Hosting</li>
<li>Domain Names</li>
<li>SSL Certificates</li>
</ul>
</div><!--end body div-->

Answer 1

The following will fix your issue (http://jsfiddle.net/76y7wbf6/1/):
.body-nav {
overflow:hidden;
}
The issue stems from using floats, which takes a slight step outside of the normal DOM flow. Your .body-nav element loses track of its children, and occupies a height of 0 (or 1px).
Another alternative is to apply a clearfix class to body-nav, which would look something like (http://jsfiddle.net/76y7wbf6/):
.clearfix:after {
clear:both;
display: block;
content: ' ';
}
A metaphore I like to use:
Using floats is like traveling through hyperspace. They exist, kinda, and can impact other DOM elements... but they are also travelling at a different dimensional plane (left-right).
To bridge the float hyperspace travel, you can apply clear:both on itself or overflow:hidden on its parent.
... And if you apply float on a floating element's parent, it can provide a self-clear, but then that parent is traveling through hyperspace too.

Answer 2

This is just to show you that there is simple ways of doing what you want to achieve ( a horizontal unordered list ) instead of using limited approaches such as display:inline-flexor complicated/tricky approaches
Bottom line let's not over-complicate what is simple.
So,
remove the float:left from your .body-nav ul (there is no point on being there)
set your .body-nav ul li to display inline (with this the li's will display as it states - inline - instead of the default behavior display:list-item
Snippet below:
.body-nav {
width: 1090px;
margin: 0 auto 0 auto; /* you can shorthand this to - margin:0 auto - */
background-color: lightblue;
}
.body-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.body-nav ul li {
display:inline;
padding-right: 15px;
}
<header>
<div class="header-content">
<img src="images/logo.png" class="logo" alt="Site Logo">
<ul>
<li>24/7 Support [phone]</li>
<li>Manage my account
</li>
</ul>
</div>
</header>
<div class="body-nav">
<ul>
<li>Web Hosting
</li>
<li>Reseller Hosting
</li>
<li>Domain Names
</li>
<li>SSL Certificates
</li>
</ul>
</div>
<!--end body div-->

Answer 3

Instead of mucking around with floats, why don't you make use of CSS3 and use the flexbox layout. Setting the UL display to "inline-flex" will give you the desired result with the lightblue background.