CODEWITHSUNDEEP
css
Jonah
Jonah

Reputation: 16242

Extra space to left of floated <li> items in horizontal menu

I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):

Picture of extra space

Here's a fiddle: http://jsfiddle.net/W3qqh/

Questions

  1. What's causing the space?
  2. How can I eliminate the space?

Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.

HTML

<div class="header">
  <div class="home-logo"><a href="/">HOME</a></div>
  <div class="main-nav">
    <ul>
      <li><a>Explore</a></li>
      <li><a>Earn</a></li>
      <li><a class="selected">Merchants</a></li>
    </ul>
  </div>

  <div class="sub-nav">
    <ul>
      <li><a>Be Secure</a></li>
      <li><a>Get Help</a></li>
      <li><a>Contact Us</a></li>
    </ul>
  </div>

</div>

CSS

* { box-sizing: border-box; }

.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }

.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }

.sub-nav { font-size: 12px; color: #4ebeb2;  background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}

Upvotes: 0

Views: 624

Answers (2)

imbondbaby
imbondbaby

Reputation: 6411

In .sub-nav, add:

float:left;
position:relative;
left:239px;

In .main-nav, add:

float:left;

Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.

Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.

JSFiddle Demo

UPDATE

In .main-nav, you have:

padding: 2px;

If you remove that and add position and left in .sub-nav, you wouldn't need float property.

JSFiddle Demo

Upvotes: 1

The Spirit of Gordon Bombay
The Spirit of Gordon Bombay

Reputation: 317

Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?

First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).

.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px;  }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2;  background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }

Upvotes: 1

Related Questions