Creating a table-like structure in HTML using `<div>` elementsWould you like to

Question

Creating a table-like structure in HTML using `<div>` elementsWould you like to

I am looking to design a basic HTML page with a menu bar on the left side occupying 17% of the width, and content on the right side occupying 83% of the width.

Below is the HTML code I have constructed:

.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 goes here
  </div>
  <div class="cell" id="rightCol">
    Content goes here
  </div>
</div>

However, I am facing an issue where the divs are overlapping each other.

https://i.sstatic.net/b90i9.png

I attempted to adjust the right div size to 82%, which resolved the overlapping issue but caused a gap between the divs.

How can I ensure that the divs align on the same line with 17% and 83% width distribution without incorporating <table> elements?

Desired outcome:

https://i.sstatic.net/tXJQn.png

html css

Answer 1

Answer №1

The issue at hand is the addition of a border, which also requires space due to its width. To address this, you can utilize CSS box-sizing, which incorporates the widths of the border and padding into the element's overall 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>

In any case, in the current year of 2019, it would be beneficial to explore or implement CSS Grid Layout or flexbox

Answer 2

The issue at hand is the addition of a border, which also requires space due to its width. To address this, you can utilize CSS box-sizing, which incorporates the widths of the border and padding into the element's overall 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>

In any case, in the current year of 2019, it would be beneficial to explore or implement CSS Grid Layout or flexbox

Answer 3

Answer №2

To achieve the desired layout, change the display types of the row and cell to table and table-cell respectively. Ensure the row is set to width: 100% and remove the float: right style.

<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>

Answer 4

To achieve the desired layout, change the display types of the row and cell to table and table-cell respectively. Ensure the row is set to width: 100% and remove the float: right style.

<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>

Creating a table-like structure in HTML using `<div>` elementsWould you like to

Answer №1

Answer №2

Similar questions

Populate a database with information collected from a dynamic form submission

Tips for reducing the height of the footer without compromising the alignment of the text within

Preserving content following the use of jQuery's fadeIn/fadeOut methods

Issue with manipulating background color with JQuery in CSS

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Node.js and Express.js fails to transmit files to clients

Ensure that grid rows occupy the least amount of space possible

What is the best way to retrieve a particular value from a database using PHP?

The controller remains unresponsive when attempting to activate the button on the webpage

By checking the active box and completing the fields, the button will be activated

Bootstrap - Utilizing a boxed grid within a div located in the .fluid-container

Equal-height rows and columns using Flexbox

Display a progress bar in an application to visualize the loading of database records

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

Scale first, then drag and drop to fix a faulty registration

What is the process for enabling HTMLField in Django Admin and ensuring it is accurately displayed on the template?

JavaFX Animation for Charting

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I am having trouble displaying the background on my website using css/html

Resizing the width to fit truncated content