CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

HTML/CSS: Start of DIV at an odd position

At this JSFiddle, why is nav#nav-header-menu starting at the top of the screen?

In the HTML, it starts after div#header-right.

The reason I ask is I'd like to move nav#nav-header-menu upwards (margin-top: -2em;) so that the logo sits between the two horizontal borders, like this:

enter image description here

The JSFiddle works best with a wide HTML window width.

HTML:

<body>
<div class="site-container">
    <header class="site-header" itemscope="" itemtype="http://schema.org/WPHeader">
     <div class="wrap">
      <div class="container">
        <div id="header-left">
            <p><a href="mailto:[email protected]" title="Email Us"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/email.png" alt="Email Us" title="Email Us"></a> <a href="mailto:[email protected]" title="Email Us">[email protected]</a> </p>
        </div>
        <div id="header-right">
            <p><span id="social"><a href="#" title="Watch us on YouTube"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/youtube.png" alt="Watch us on YouTube" title="Watch us on YouTube"></a> <a href="#" title="Follow us on Facebook"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/facebook.png" alt="Follow us on Facebook" title="Follow us on Facebook"></a> <a href="#" title="Follow us on Instagram"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/insta.png" alt="Follow us on Instagram" title="Follow us on Instagram"></a></span> <span id="user"><a ref="http://vmpersonal.com/wp-login.php" title="Sign In to VM Personal">Sign In</a> / <a href="http://vmpersonal.com/wp-login.php?action=register" title="Register for an account on VM Personal">Register</a></span></p>
        </div>
        <nav id="nav-header-menu">
            <div class="menu-header-menu-container">
                <ul id="menu-header-menu" class="genesis-nav-menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item menu-item-104"><a href="http://vmpersonal.com/" itemprop="url">Home</a></li>
                    <li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="/shop" itemprop="url">Products &amp; Services</a></li>
                    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://vmpersonal.com/blog/" itemprop="url">Blog</a></li>
                    <li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-110" style="display: none;"><a href="/" itemprop="url">Logo</a></li><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/logo.png" width="124px">
                    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://vmpersonal.com/success-stories/" itemprop="url">Success Stories</a></li>
                    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://vmpersonal.com/about/" itemprop="url">About</a></li>
                    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://vmpersonal.com/contact/" itemprop="url">Contact</a></li>
                </ul>
             </div>
         </nav>
       </div>
     </div>
   </header>
</div>
</body>

CSS:

  <link rel="stylesheet" type="text/css" href="https://vmpersonal.com/wp-content/themes/genesis/style.css">   
  <link rel="stylesheet" type="text/css" href="https://vmpersonal.com/wp-content/themes/genesis-sample/mhm-style.css">

Help appreciated.

Upvotes: 0

Views: 62

Answers (1)

Danny Bullis
Danny Bullis

Reputation: 3199

It's because div#header-right has a float property set on it. When something is floated, it is taken out of the normal static rendering context of HTML, which renders one element after the other. Check out Layouts with float and clear here.

What you can try doing is taking the logo out of the nav container and making header-left, header-right and your logo all within the same container. Here's the general idea...what do you think?

<header class='container'>
    <div class='header-left'></div>
    <!-- put your logo here -->
    <div class='header-right'></div>
</header>
<nav class='container'>
    <div class='nav-items-left'></div>
    <div class='nav-spacer'></div>
    <div class='nav-items-right></div>
</nav>

header {
    max-height: /* desired height */;
    overflow: visible;
}

.header-left,
.header-right,
.your-logo,
.nav-items-left,
.nav-items-right,
.nav-spacer {
    display: inline-block;
    vertical-align: top;
}
.nav-spacer {
    width: /* same width as your logo */;
}
.your-logo {
    width: /* width of your logo */;
}

Upvotes: 1

Related Questions