1

I'm currently playing around with the Wordpress starter them, underscores to start theming. I've used CSS to try and place 2 DIVs side by side with no luck. I've done what I usually do in this scenario but it hasn't worked. Nor has any other solution that I've found on SO.

The overall goal is for the header to be 90% of the screen width (centered) with the site-header and main-navigation to take up 50% of that space. Any ideas?

The HTML (less the php to avoid things being over complicated):

<header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
        <h1><a href="#">Test Site</a></h1>
    </div>

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <p> menu items </p>
    </nav>
</header>

The most basic CSS solution that I've tried:

#masthead {
    width: 90%;
    margin: 5px auto;
}

.site-branding {
    width: 50%;
    float: left;
}

.main-navigation {
    width: 50%;
    float: left;
}
wpdoodle
  • 11
  • 3
  • The following code works perfectly, there must be something else with the other styles. I've created a jsFiddle: http://jsfiddle.net/Jb4jd/. I presume there might be a margin/padding added to the child elements or the parent one. I'd start from here. – Andrzej Ośmiałowski Feb 24 '14 at 00:31
  • Thanks for quick response. Looking via Chrome dev tools, the only other things being applied is "box-sizing: border-box;" - is this likely to cause any harm? – wpdoodle Feb 24 '14 at 00:43
  • 2
    Fixed. Underscores uses a css reset style sheet which applied "clear: both;" to all elements. Adding "Clear:none;" to both child DIVs has fixed the problem & the DIVs are now aligned. Thanks Andrzej for pointing me in the right direction. – wpdoodle Feb 24 '14 at 00:53
  • 1
    I would suggest you build your site with good old HTML and CSS - and then when you are done, move it over to underscores... or better yet - skip underscores and just grab some stuff you might need from it. – sheriffderek Feb 24 '14 at 01:13

0 Answers0