CODEWITHSUNDEEP
htmlcss
AZT
AZT

Reputation: 149

CSS Layout is unexpected

I am designing a website for software created by my self. For this, I need a layout in which three boxes are on the same horizontal position. But as I put text in those they start shifting. What might be the possible cause?

<body class="metro">
    <nav class="navigation-bar">
        <nav class="navigation-bar-content">
            <div class="element">My Software Name</div>
            <span class="element-divider"></span>
            <a class="element place-right" href="#">Download</a>
        </nav>
    </nav>
    <div class="slideImage"></div>
    <div class="about">
        <div class="infoBar">
            <h2>What is ?</h2>
            <span class="paragraph">
                this is example text to illustrate the real problem  regardig the info bar alingment
            </span>
        </div>
        <div class="infoBar"><h2>Why this ?</h2>
            <span class="paragraph">

            </span>
        </div>
        <div class="infoBar"><h2>About</h2></div>
    </div>

</body>

Here is full Scree Example

Upvotes: 0

Views: 35

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could do it by set the vertical-align:top; to .infoBar to remove the vertical whitespace between inline-block elements.

JSFiddle - DEMO

CSS:

.infoBar {
    vertical-align:top;
}

Upvotes: 1

Related Questions