HTML/CSS Splitting container into 3 parts

Question

I want to split container into three sections and it's already done but I can't figure out how to align all these sections vertically.

HTML:

<table width="100%">
<tbody>
    <tr>
        <td class="description">
            <div>
                <section class="col">
                    <h4>Description1</h4>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </section>
                <section class="col">
                    <h4>Description2</h4>
                    <div>blablalblablablalbla</div>
                </section>
                <section class="col">
                    <h4>Description3</h4>
                    <div>bl
                </section>
            </div>
        </td>
     </tr>
</tbody>

CSS:

.description {
    background: lightgrey;
}

.description .col {
    display: inline-block;
    width: 30%;
}

https://jsfiddle.net/kg4xao6m/

can you share a link to the site? I would like to use Google's Web Developer Tools to inspect the objects — Jonathan Scialpi, Sep 16 '15 at 13:24

score 4 · Accepted Answer · answered Sep 16 '15 at 13:25

4

Use vertical-align: top in your CSS for the inline-block elements.

.description .col {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

JSFiddle

answered Sep 16 '15 at 13:25

Liftoff

24,717
13
66
119

score 1 · Answer 2 · answered Sep 16 '15 at 13:35

I agree with @David answer that is the way to align the sections vertically but you are also using a table that clearly has two <tr> with three <td> rather than one of each.

Semantically this is more appropriate:

table {
    background: lightgrey;
}

td {
    width: 30%;
    vertical-align: top;
}

<table width="100%">
  <tbody>
    <tr>
      <td>
        <h4>Description1</h4>
      </td>
      <td>
        <h4>Description2</h4>
      </td>
      <td>
        <h4>Description3</h4>
      </td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td>blablalblablablalbla</td>
      <td>bl</td>
    </tr>
  </tbody>
</table>

You are right but I didnt show the rest of implementation. I use a table with let's say 5 columns and 3 rows, the last row is supposed to be like in an example so the way to do it without creating another table in table is to do it with divs. — Suprido, Sep 16 '15 at 13:42

HTML/CSS Splitting container into 3 parts

2 Answers2