0

I'm playing around with CSS and Underscores. I've tried to place 2 DIV's side by side, but it have no idea how to do that.

This is what I have and what I want to achieve

First idea: set these items as inline elements. Easy to say, not easy to do.

There was a very similar question a few years ago: Side by Side DIVs in Wordpress/Underscores

I've tried this code:

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline;
  }

.main-navigation {
  display: inline;
  }
<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

with no result (only my header background has disappeared).

I have no idea what I'm doing wrong (still newbie in CSS), so I will be extremely grateful for targeting me. I thought, that setting clear: none for an element means "do not clear it, regardless of the overriding elements" (quite logical for me).

This is a "clear" Underscores template, so the whole CSS can be found here: https://github.com/Automattic/_s/blob/master/style.css

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
krzaczor93
  • 145
  • 2

1 Answers1

0

HTML:

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<ul>
  <li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

CSS:

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline-block;
  width:30%;
  }

.main-navigation {
  display: inline-block;
  width:50%;
  }

ul >li{
display: inline-block;
}

FIDDLE

Korgrue
  • 3,430
  • 1
  • 13
  • 20
  • Magic. No, seriously though - give this a read. The first answer should provide you with the info you need in order to understand what is going on here: http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – Korgrue Apr 04 '16 at 21:20
  • Just realized that there is a second part to this that the link does not answer. Width is very important. For the divs to be able to align in a horizontal block - they need a width that does not exceed that of the container. The formula would be something like D1 width + D2 Width + D3 Width ... <= total parent width. Using percent instead of a fixed width allows the divs to scale proportional to their parent. – Korgrue Apr 04 '16 at 21:24