Oleg9 Oleg9 - 6 months ago 9
HTML Question

Floating elements that are inside of a div are arranged one above the other



.site-header {
width: 960px;
margin: 0 auto;
overflow: hidden; }
.site-header .site-branding {
float: left;
width: 360px; }
.site-header .reg-or-login {
float: right;
width: 600px;
overflow: hidden; }

<header id="masthead" class="site-header" role="banner">

<div class="site-branding">

<div id="logo" class="doguni-logo">
<img src="/wp-content/themes/doguni/layouts/images/doguni-logo.jpg" alt="">
</div>

</div><!-- .site-branding -->

<div class="reg-or-login">
<ul>
<li><a href="">Registration</a></li>
<li><a href="" class="highlight">Login</a></li>
</ul>
</div>

</header>





But
.site-branding
and
.reg-or-login
divs are arranged one above the other.

How to make them occupy one line?

Answer

<ul> element by default has some margin at the top and bottom, you have to remove it by adding margin: 0 rule to it.

See example:

.site-header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; }
  .site-header .site-branding {
    float: left;
    width: 360px; }
  .site-header .reg-or-login {
    float: right;
    width: 600px;
    overflow: hidden; }

ul {
  margin: 0;
}
<header id="masthead" class="site-header" role="banner">

    <div class="site-branding">

        <div id="logo" class="doguni-logo">
            <img src="http://lorempixel.com/360/100/" alt="">
        </div>

    </div><!-- .site-branding -->

    <div class="reg-or-login">
        <ul>
            <li><a href="">Registration</a></li>
            <li><a href="" class="highlight">Login</a></li>
        </ul>
    </div>

</header>