1

I've created a jsFiddle to help explain: http://jsfiddle.net/windthorst/BvgZK/

But here is the HTML right here, for reference:

<header>
    <div id="titlebar">
        <div id="titlename">
            <h1>Title Name Here</h1>
        </div>
        <div id="titlemenu">
            <span>Item One</span><span>Item two</span>
        </div>
    </div>
</header>

I know that by adding the CSS tag float: left to both of the inner divs (#titlename and #titlemenu) I can have them line up side by side correctly in the containing div (#titlebar). It took a moment to figure out, but that's done.

What I'm wondering is: why do they position the way they do in the jsFiddle, without the floats? When there is no text in the first div (removing the <h1> tag here), the second div positions so that the <span> text inside it "rests" along the bottom of the containing div (#titlebar), and when there is no text in either they both position "correctly" (to my estimation) within the containing div.

Sorry to bother with the "why," but I'm totally stumped on how to avoid struggling with such issues in the future if I don't know what's actually going on here...

windthorst
  • 38
  • 3

2 Answers2

4

It's the vertical-align property that controls the alignment of elements within the inline formatting context - and the reason the <div> moves down when adding text is because the default value of vertical-align is baseline for elements in the inline formatting context, which basically means that an element will adjust it's vertical position based on the baseline of text in surrounding inline-level elements (E.g. the baseline of "Title Name Here"). You can change the default value to top for example, so that it aligns itself to the top of surrounding inline-level elements, which is a bit more intuitive. You may benefit from taking a look at this previous answer for a better explanation of the baseline value - it can be a little hard to wrap your head around at first

http://jsfiddle.net/BvgZK/1/

Community
  • 1
  • 1
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • Even though it's far from completion - there is a good explanation of `baseline` within the [Line Layout Module](http://dev.w3.org/csswg/css-inline/#baseline) – Adrift Aug 19 '13 at 14:49
1

By default, the text in both inline blocks are vertically aligned along a common baseline for the text.

If you apply vertical-align: top to #titlename, you may get a better result.

See: http://jsfiddle.net/audetwebdesign/BvgZK/2/

Marc Audet
  • 46,011
  • 11
  • 63
  • 83