CODEWITHSUNDEEP
htmlcss
123321123321
123321123321

Reputation: 79

Why does bigger text push content to the left down?

So I made four simple divs and I will be changing the property of the header div.

The HTML:

   <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        <div class="header">Lorem Ipsum</div>
    </div>

The CSS:

.third {
    width:500px;
    display:inline-block;
    border-right:1px solid black;
    height:400px;
}
.header {
    margin-left:16%;
    font-family:Arial;
    font-size:200%;
}

The third div works great but the first two divs are pushed down because of the bigger text. What can I do to prevent this issue?

Upvotes: 0

Views: 312

Answers (3)

Jack
Jack

Reputation: 9388

Adding vertical-align: top will fix your problem.

Fiddle: http://jsfiddle.net/QX7FH/

If you're curious why this works, andyb does a great job explaining why here: Why does this inline-block element have content that is not vertically aligned

Upvotes: 2

Katrina
Katrina

Reputation: 1925

div's are automatically set to be block elements. This means that they will create a line break. If you also put display:inline-block; in your css for your .header, it should prevent it from creating a new line.

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

You can use floats instead of inline-block, you also gain a little bit of browser support (old ie's):

http://jsfiddle.net/aP9Fu/

.third {
    width:500px;
    display:block;
    border-right:1px solid black;
    height:400px;
    float: left;
}

Also, I added a container around all those divs in order to clear the floats.

Upvotes: 1

Related Questions