Home/ Questions/Q 315333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:16:55+00:00

So i have this code <html> <head> <style type=text/css> div.one { border:1px solid black;

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0