CODEWITHSUNDEEP
htmlcss
ssmithstone
ssmithstone

Reputation: 1209

HTML CSS and block level elements aligning at top of a block container

So i have this code

<html>
<head>
  <style type="text/css">
    div.one { border:1px solid black; text-align:center; padding:.2em; height:300px;
  }

    div.one div {display:inline-block; height:100%;}
  </style>
</head>
<body>

<div class="one">

  <div style="border:1px solid red; width:40%">

    <h3>1st div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
    <p>line #4</p>
  </div>

  <div style="margin:0 .2em; width:16%; border:1px solid red;">

    <h3>2nd div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
  </div>

  <div style="border:1px solid red; width:40%;">

    <h3>3rd div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
    <p>line #4</p>

  </div>

</div>

</body>
</html>

and if you run it, it makes the middle div which has less p elements in move down, is there an easy way to get it to align to the top with the others

Upvotes: 1

Views: 1509

Answers (1)

cletus
cletus

Reputation: 625097

Figured it out.

Basically the center div is lowered because the contents of the divs are getting baselined at the bottom. See how they have a common bottom? The center div has one less paragraph. Add another paragraph and the problem goes away. Easy fix:

div.one div {display: inline-block; height:100%; vertical-align: top;}

Add a vertical align. It's probably defaulting to vertical-align: baseline because it's inline.

Note: display: inline-block is only supported in FF3+, IE8+, Opera and Chrome. An alternative implementation with better cross-browser support involves floating the inner divs. This requires slight modification to get the margins you want though.

Upvotes: 2

Related Questions