Home/ Questions/Q 7077751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:27:44+00:00

I am trying to get <head> and <head> to align horizontally. I’ve tried using

  • 0

I am trying to get <head> and <head> to align horizontally. I’ve tried using .header_nav {
float:left;
clear:both;
} but it doesn’t seem to be working.

You can check the actual page at http://www.bolistylus.com

Thanks for your help!

    <header id="branding" role="banner">
            <div class="header_nav">
            <div class="head">
                <hgroup>
                    <h1 id="site-title"><a href="/"><img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/boli-logoLimeBlack.png" alt="stylus for iPad"/></a></h1>
                    <h2 id="site-description"></h2>
                </hgroup>
            </div>
            <div class="head">

            <ul>

                            <li><a href="/shop">SHOP</a></li>      


                            <li><a href="/about-us">ABOUT US</a></li>

                            <li><a href="/faq">FAQ</a></li>


                            <li><a href="/cart">YOUR CART</a></li>
                </ul>

            </div>  
</div>





    </header><!-- #branding -->

Here is the css for the stuff inside:

.header_nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 400px;
}

#branding img {
    height: auto;
    margin-bottom: -30px;
    width: 34%;
}

.header_nav {
    background: none repeat scroll 0 0 #F3F3F3;
    float: left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Floats and clearing are a bear – here’s how I get around it (this isn’t the cleanest, but it works).

    First, you need to use float: left; for both divs. Also, you can get later elements to line up better if you go:

    <div id="header_nav">
<div class="head" style="float:left">...</div>
<div class="head" style="float:left">...</div>
<br style="clear:both"/>
</div>

    Again, the use of a break isn’t the best (there’s better ways, but I can’t get them to work consistently since I’m also somewhat novice), and definitely use CSS and not inline styling.

    Edits: I misunderstood you wanting two “head” classes to float – changed it but was beaten to the punch.

    • 0