Why do the following H3 tags not float?

Question

The following JS Fiddle demonstrates my problem: http://jsfiddle.net/pUBuq/

When hovering over the menu, I wish for the menu to display like this:

Header A    Header B
--------    ---------
Link 1A     Link 1B
Link 2A     Link 2B

In stead it displays like this:

Header A
Header B
Link 1A
Link 2A
Link 1B
Link 2B

Here's the markup:

<ul id="site-nav">  
    <li>
        <a class="menu" href="#">Menu 1</a>
        <div class="site-nav-menu">
            <nav>
                <h3>Header A</h3>
                <h3>Header B</h3>
                <ul>
                    <li><a href="#">Link 1a</a></li>
                    <li><a href="#">Link 2a</a></li>
                </ul>
                <ul>
                    <li><a href="#">Link 1b</a></li>
                    <li><a href="#">Link 2b</a></li>
                </ul>
            </nav>
        </div>
    </li>  
</ul> 

I've tried to float the <h3> headers and give them the same width as the link elements but nothing seems to float. The CSS is a bit long and probably best viewed in the fiddle: http://jsfiddle.net/pUBuq/

I've been testing this in FF7 and would greatly appreciate any help figuring out where I'm going wrong.

Answer 1

putting the h3 in the ul s reads a little cleaner if just reading the markup (like how search crawlers view a site).

jsfiddle example

to format the header/links next to each other horizontally set the width on the nav element ( width:484px used in the js fiddle above fit the two menu lists perfectly)

in your example the a and h3 are set to 220px but the nav has an auto width and it's parent div is positioned absolutely (meaning it'll only go as wide as its content unless the width is set).

Answer 2

Your <h3> elements are too wide.

If you set the width of one of the parent elements to something around 550px (220 + 220 + what I assume to be margins/paddings that I didn't happen to see), or make the <h3> s significantly smaller (I just lopped off a number in the width you have set, just to see), you'll find that they do, in fact float.

Remember, when floating things, child widths + margins + paddings + child borders must be less than or equal to the parent element in order for things to appear on the same line.