CODEWITHSUNDEEP
htmlcsshtml-lists
Richard Rodgers
Richard Rodgers

Reputation: 625

CSS - Unordered list issue

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-->

Upvotes: 1

Views: 77

Answers (3)

dippas
dippas

Reputation: 60573

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-->

Upvotes: 1

DylanB
DylanB

Reputation: 441

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.

Upvotes: 0

TheIronDeveloper
TheIronDeveloper

Reputation: 3624

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.

Upvotes: 1

Related Questions