Div gets misplaced on text insertion and text goes

Question

Here is the jsfiddle of the problem, http://jsfiddle.net/B77G2/2/

The problem is, that when I put text in a div, the div moves down(the div with the home id in the jsfiddle has the text in it, you can remove t## e text to see it working properly). If there is no text in a div, it appears fine and in line with the other divs like its supposed to.

And the text goes out of the div even though I'm using word-wrap.

Why is this happenning and how can I fix it?

Everything has been minified for showing in the jsfiddle, I hope my problem is clear.

Here's the html

<div id="container">
        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

        <div id="sliding-container">
            <div class="slide leftmost" id="followme">
            </div>

            <div class="slide left" id="projects">

            </div>

            <div class="slide current" id="home">
                <p>Y u do dis :( fjsdahkfjdhsjfhdkjfsdjhfjsk djskfhdjfurt</p> // <---- the div thats being shown in the middle
            </div>

            <div class="slide right" id="knowledge">

            </div>

            <div class="slide rightmost" id="contact">

            </div>
        </div>

    </div>

Answer 1

Seems like a vertical-align issue. Try setting it explicitly:

.slide { vertical-align:top; }

Fiddle

Browsers have a slightly complex algorithm for computing the baseline (default value) of vertical-align for floated elements or with inline-block display. Giving it a explicitly top value usually fixes the issue.

---

Oh I almost forgot to add why the line isn't breaking. It is simple: Your white-space:nowrap is inherited to descendants elements and it forces text to be in a single line. All you have to do is reset it before reaching the text content which require word-wrap, so:

.slide { white-space: normal; word-wrap: break-word; }

Fiddle

---

For the vertical-align explanation, it is a little complex, here is the spec for the default vertical-align value - baseline:

Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element. If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin for replaced elements, with the parent's ‘alphabetic’ baseline. The dominant baseline is set to ‘alphabetic’ if there is no parent or if there is a flow orientation change between this element and its parent, otherwise it is set to ‘no-change’.

Better explain with an example. Open this fiddle. I've added some text in-between the slides which represent the parent's alphabetic baseline. The baseline is the red line in this image:

As you can see, when the child has an alphabetic baseline, both parent and child alphabetic baselines are aligned as per the first line of the spec: "Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element."

The other sibling slides do not have any non empty/white-space-only TextNodes, therefore they do not have an alphabetic baseline to align with and the second statement of the spec kicks in: "If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin with the parent's ‘alphabetic’ baseline."