How to create table like structure using div in HTML

Question

I need to create a simple HTML page having a menu bar on the left side (width: 17%) and content on the right side (width: 83%).

I have come up with the following HTML code:

.row {
  display: block;
}

.cell {
  padding: 0;
  margin: 0;
  display: inline-block;
  border: solid;
}

div#leftCol {
  width: 17%;
}

div#rightCol {
  width: 83%;
  float: right;
}

<div class="row">
  <div class="cell" id="leftCol">
    Menu Bar here
  </div>
  <div class="cell" id="rightCol">
    Content here
  </div>
</div>

However, the divs overlaps on each other.

I tried reducing the size of the right div to be 82% and it moved the divs on the same line but it left a gap in-between.

What can I change to align the divs to be on the same line using 17% and 83% space without using <table> tags?

Expected result:

the reason it's leaving a gap in between is because you're using float: right on your second cell, set it to float left. — Glenn van Acker, Oct 10 '19 at 13:35

caramba · Answer 1 · 2019-10-10T16:32:52.223

The problem you have is you add a border which also needs space. Because the border has a width. You can use CSS box-sizing which will then include the border and padding widths in the elements width

* {
  box-sizing: border-box;
}

.row {
    display: block;
}

.cell {
    padding: 0;
    margin: 0;
    display: inline-block;
    border: solid;
}

div#leftCol {
    width: 17%;
}

div#rightCol {

    width: 83%;
    float: right;
}

    <div class="row">
        <div class="cell" id="leftCol">
            Menu Bar here
        </div>
        <div class="cell" id="rightCol">
            Content here
        </div>
    </div>

Either way, these days (Year now is 2019) you should look into or use CSS Grid Layout or flexbox

score 1 · Accepted Answer · answered Oct 10 '19 at 13:36

If you change the row and cell display types to table and table-cell, you'll get what you want. Also, set the row to width: 100% and drop the float: right.

<html>

<head>
    <style>
        .row {
          display: table;
          width: 100%;
        }

        .cell {
            padding: 0;
            margin: 0;
            display: table-cell;
            border: solid;
        }

        div#leftCol {
            width: 17%;
        }

        div#rightCol {
            width: 83%;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="cell" id="leftCol">
            Menu Bar here
        </div>
        <div class="cell" id="rightCol">
            Content here
        </div>
    </div>

</body>

</html>

How to create table like structure using div in HTML

2 Answers2