CODEWITHSUNDEEP
htmlcssweb
olegst
olegst

Reputation: 1267

div with table display: alignment issue

I have the following code: 

div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}
<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

The content of the second cell is aligned to the bottom of the div in the first one and appears at the very bottom of it's cell. When both cells are filled with text then content in both floats at the top.

How can I get the content of the second cell to be positioned at the top of it's cell?

The question must be silly, but I'm an absolute beginner in css and just don't know how to approach the issue.

Upvotes: 0

Views: 75

Answers (5)

Annalaxmi
Annalaxmi

Reputation: 133

Add vertical-align Attribute 

div {
  box-sizing: border-box;
  border-style: solid;
}
div.table {
  display: table;
}
div.row {
  display: table-row;
}
div.cell {
  display: table-cell;
  vertical-align: top;
}
div.logo {
  width: 200px;
  height: 200px;
  border-color: red;
}
<div class="table">
  <div class="row">
    <div class="cell">
      <div class="logo"></div>
    </div>
    <div class="cell">
      Content
    </div>
  </div>
</div>

Upvotes: 2

Aaron Mahlke
Aaron Mahlke

Reputation: 337

Following should just work fine:

div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: inline-block;  /*changed this line*/
}
div.row {
       display: flex;          /*changed this line*/
}
div.cell {
       /* removed styles */
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}
<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

Upvotes: 1

Samir
Samir

Reputation: 1368

Use vertical-align: top in your css.

div.cell {
   display: table-cell;
   vertical-align: top;
}

Upvotes: 1

Jameson the dog
Jameson the dog

Reputation: 1806

do you mean this? added vertical-align:top to div.cell

div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
       vertical-align:top;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}
<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46539

Use vertical-align:top to align table cells vertically.
divs normally have vertical-align:baseline in their default stylesheet definitions, which explains the display you see. Note that actual table cells (td and th elements) have vertical-align:middle by default.

div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
       vertical-align:top;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}
<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

Upvotes: 4

Related Questions