Why do we need float:left in this header?

Question

.header2
{
   background-color:#CDD1CD; /*have to change */
   /*padding: 15px 0;*/
}

.header1 
{
    background-color: #60db60; /* have to change */
 padding: 10px 0;
}

/*Fixed header properties */
.fixed 
{
    position: fixed;
    top:0; left:0;
    width: 100%; 
}

.right
{
  float: right;
}

<div class="headers header1" id="header1">
     <div class="logo"></div>
  <div class="slogan"></div>
  </div>
  
  <div class="headers header2 clearboth" id="header2">
      <nav class="login_links">
   <ul>
      <li>Are you a member?</li>
      <li><a>Register</a></li>
      <li><a>login</a></li>
   </ul>
   </nav>
  </div>

You can see the gap between two headers. If i give float:left to nav it will be fixed. What could be the reason? What are the possibilities.

EDIT:

After a few edits i found it is caused by ul element's margin.

ul
{
 margin: 0;
}

Where does this margin come from?

No gap here without `float: left;` - http://jsfiddle.net/LuLb4fds/ — D4V1D, Mar 29 '15 at 07:05
Right, sorry I had included `Bootstrap` as I thought you did. Looking deeper in your code. — D4V1D, Mar 29 '15 at 07:12

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

The ul tag has a default margin. For a more comprehensive discussion see here:

Unordered List (<ul>) default indent

ul {
    margin:0px;
}

From a glance the reason is for backwards compatibility back in the day when our tech wasn't as advanced.

edited May 23 '17 at 11:43

Community

1
1

answered Mar 29 '15 at 07:25

Alexei Darmin

2,079
1
18
30

Thanks. What are all the other elements has this default indent? – Gibbs Mar 29 '15 at 07:32
Lists have default indents since functionally we want them to be indented. Only recently have we begun to use lists for navigation bars where this indentation is unwanted. This includes `
– Alexei Darmin Mar 29 '15 at 07:36

Why do we need float:left in this header?

1 Answers1