CODEWITHSUNDEEP
htmlcss
user3704262
user3704262

Reputation: 13

Building a 3 column div?

I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?

example

the html: 

   <div class="left">
   </div>

   <div class="middle">

example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>



   </div>

   <div class="right">
    </div>
  </div>
 </body>

the css:

.wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
   }
   img {
       width: 200px;
       height: 200px;}
   div.left, div.right {
    margin: 3px;
    border: 1px solid #0000ff;
    display: inline-block;
    width: 18%;
    padding: 1px;
    background: red;
   }
   div.middle {
    margin: 3px;
    border: 1px solid #0000ff;
    display: inline-block;
    width: 60%;
    padding: 1px;
    background: red;
   }

Upvotes: 1

Views: 85

Answers (3)

invernomuto
invernomuto

Reputation: 10211

under .wrapper all div should be vertical-aligned to top

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .wrapper {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            text-align: center;
        }

        img {
            width: 200px;
            height: 200px;
        }

        div.left, div.right {
            margin: 3px;
            border: 1px solid #0000ff;
            display: inline-block;
            width: 18%;
            padding: 1px;
            background: red;
        }

        div.middle {
            margin: 3px;
            border: 1px solid #0000ff;
            display: inline-block;
            width: 60%;
            padding: 1px;
            background: red;
        }

        .wrapper div{
            vertical-align:top;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left">
        </div>

        <div class="middle">

            example <p>
                example
            <p>
                example
            <p>
                example
            <p>
                example
            <p>
                example
            <p>
                example
            <p>



        </div>

        <div class="right">
        </div>
    </div>
</body>
</html>

Upvotes: 1

Riskbreaker
Riskbreaker

Reputation: 4791

Just do vertical-align: top; on the left/right like this:

http://jsfiddle.net/RJR2V/2/

But if you want them to be even in heights than I suggest display: table-cell;

Like this:

http://jsfiddle.net/RJR2V/1/

Upvotes: 3

apaul
apaul

Reputation: 16170

Try using vertical-align

Working Example

  div.left, div.right {
      margin: 3px;
      border: 1px solid #0000ff;
      display: inline-block;
      width: 18%;
      padding: 1px;
      background: red;
      vertical-align: top; /* see here */
  }

MDN documentation for vertical-align

Upvotes: 3

Related Questions