CSS - Unordered list issue

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 (513) 571-7809</li>
            <li><a href="#">Manage my account</a></li>
        </ul>
    </div>
</header>
<div class="body-nav">
    <ul>
        <li><a href="#">Web Hosting</a></li>
        <li><a href="#">Reseller Hosting</a></li>
        <li><a href="#">Domain Names</a></li>
        <li><a href="#">SSL Certificates</a></li>
    </ul>
</div><!--end body div-->

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

I went with the first fix it seemed a little easier. Thank you so much for your quick reply.

dippas · Accepted Answer · 2015-07-30 04:31:10Z

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 (513) 571-7809</li>
      <li><a href="#">Manage my account</a>
      </li>
    </ul>
  </div>
</header>
<div class="body-nav">
  <ul>
    <li><a href="#">Web Hosting</a>
    </li>
    <li><a href="#">Reseller Hosting</a>
    </li>
    <li><a href="#">Domain Names</a>
    </li>
    <li><a href="#">SSL Certificates</a>
    </li>
  </ul>
</div>
<!--end body div-->

DylanB · Accepted Answer · 2015-07-30 00:00:41Z

0

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.

answered Jul 30, 2015 at 0:00

DylanB

4163 silver badges16 bronze badges

4 Comments

Richard Rodgers Over a year ago

Hi, Dylan. Thanks a lot. That seems to work really well. I will probably use t hat for now on..

AndrewHipp Over a year ago

Caution though. There's limited browser support at the moment. caniuse.com/#search=flexbox

DylanB Over a year ago

Yes, definitely worth mentioning that being a css3 feature it won't be supported by older browsers. Though isn't that just an incentive for the dinosaurs to get with the times? ;)

dippas Over a year ago

to this simple issue? no! just use CSS 2.1 is more than enough

Collectives™ on Stack Overflow

CSS - Unordered list issue

3 Answers 3

1 Comment

Snippet below:

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Snippet below:

Comments

4 Comments

Related