0

Just started to learn CSS and happened to see some discussion about display:table for web layout. I made a simple pen in which a two-row layout is created by inline-block and floats respectively. I doubt if display:table can be used to do this.

    .container{
       width:500px;
       height:200px;
       border:1px solid green;
       margin:10px;
    }

    .a, .b {
       display:inline-block;
       background:grey;
       border:1px solid red;
       box-sizing:border-box;
       vertical-align:top;
     }

    .a {
       width:30%;
       height:50%;
     }

     .b {
       width:70%;
       height:50%;
     }
<div class="container">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="b">b</div>
        <div class="a">a</div>
</div>
Abood
  • 572
  • 1
  • 5
  • 13
Shawn Chen
  • 1,017
  • 2
  • 13
  • 24

2 Answers2

1

For such layouts it is best to avoid display: table as your cells vary in size in per column.

For layouts such as these, your best bet is to use display: flex which is very versatile and allows a greater amount of flexibility than inline-block and float. One downside of this is that it may not be compatible with older browsers, check the compatibility list here

Here is a great place to get started with flexbox.

p.s. if you really want to go through with display: table you could try the answers suggested in the below SO question: table cell width issue

Community
  • 1
  • 1
Halaster
  • 1,442
  • 1
  • 17
  • 27
0

can use display: flex, it's now the best solution.

FelixSFD
  • 6,052
  • 10
  • 43
  • 117
grinmax
  • 1,835
  • 1
  • 10
  • 13