What is the best way to design three flexible divs using display: table without the use of JavaScript?

Question

What is the best way to design three flexible divs using display: table without the use of JavaScript?

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

Is it possible to create a responsive layout with three divs that behave in the following way:

When the viewport is narrow, the three divs stack on top of each other
When the viewport is average, the first div spans full width at the top while the other two are side-by-side with equal height
When the viewport is wide, all three divs appear side-by-side with equal height

I want a solution that works well across different browsers.

I have attempted various strategies using media queries:

To achieve #1, I made each div display:block
For #2, I styled the green and blue divs as display:table-cell within a container div with display:table

However, implementing a separate container div for all three elements with display:table causes issues with the following approaches:

Setting all divs to display:table-cell - due to interference between the red div and the others
Styling the red div and smaller container divs as display:table-cell - causing conflicts with the internal structure

It's a bit complicated to explain, but I hope you understand my problem. Any guidance is highly appreciated.

Thank you!

Edit: I prefer not to set the height of any div manually; it should adjust based on content

html css responsive-design

Answer 1

Answer №1

It can be quite challenging to achieve your goal using the `display: table` property because of the limitations it imposes on container elements and its strict requirements.

Consider using flexbox instead, as it now has excellent support across various browsers. You can check browser compatibility here: http://caniuse.com/#feat=flexbox

If you need guidance on how to create equal height rows with flexbox, this resource provides a helpful example:

Answer 2

It can be quite challenging to achieve your goal using the `display: table` property because of the limitations it imposes on container elements and its strict requirements.

Consider using flexbox instead, as it now has excellent support across various browsers. You can check browser compatibility here: http://caniuse.com/#feat=flexbox

If you need guidance on how to create equal height rows with flexbox, this resource provides a helpful example:

Answer 3

Answer №2

Although @fauxserious already shared a similar answer, I want to provide my own perspective on the issue.

My solution avoids using a table and does not rely on the ::before or ::after CSS pseudo-elements.

div#div1 {
    background-color: red;
}
div#div2 {
    background-color: green;
}
div#div3 {
    background-color: blue;
}
div {
    box-sizing: border-box;
    padding: 20px;
    float: left;
    margin: 1%;
    width: 31%;
}
@media screen and (max-width: 750px) {
    div#div1 {
        width: 98%;
    }
    div#div2, div#div3 {
        width: 48%;
    }
}
@media screen and (max-width: 500px) {
    div {
        width: 98% !important;
    }
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

(For the best experience, view the snippet in a new tab/window and resize your browser window.)

Check out the live example on JSFiddle.net.

EDIT: Updated the snippet. By replacing the height property with padding in the divs, the height will now adjust based on their content.

Answer 4

Although @fauxserious already shared a similar answer, I want to provide my own perspective on the issue.

My solution avoids using a table and does not rely on the ::before or ::after CSS pseudo-elements.

div#div1 {
    background-color: red;
}
div#div2 {
    background-color: green;
}
div#div3 {
    background-color: blue;
}
div {
    box-sizing: border-box;
    padding: 20px;
    float: left;
    margin: 1%;
    width: 31%;
}
@media screen and (max-width: 750px) {
    div#div1 {
        width: 98%;
    }
    div#div2, div#div3 {
        width: 48%;
    }
}
@media screen and (max-width: 500px) {
    div {
        width: 98% !important;
    }
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

(For the best experience, view the snippet in a new tab/window and resize your browser window.)

Check out the live example on JSFiddle.net.

EDIT: Updated the snippet. By replacing the height property with padding in the divs, the height will now adjust based on their content.

Answer 5

Answer №3

Update: My apologies for overlooking the equal height requirement.

If you want to create squares, I'll provide some code and explain it step by step. Let's format this as a list for clarity, assuming the ul has been reset with no margin, padding or style type.

<ul>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
</ul>

Below is the CSS code to achieve square elements:

li {
   position: relative;
   width: 33%;
   padding-top: 33%;
}

li > div {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
   width: 100%;
}

The padding value matches the width to make perfect squares. Padding percentage, in any direction, is always based on the parent element's width (similar to margins). Now, let's delve into positioning using CSS.

ul:before,
ul:after {
   content: "";
   display: table;
}

ul:after {
   clear: both;
}

li {
   position: relative;
   width: 33%;
   padding-top: 33%;
   float: left;
}

@media screen and (max-width: 800px) {
   li {
      width: 50%;
      padding-top: 50%;
   }

   li:first-child {
      width: 100%;
      padding-top: 0; /* Adjust height value accordingly */
   }
}

@media screen and (max-width: 400px) {
   li {
      width: 100%;
      padding-top: 100%;
   }
}

Answer 6

Update: My apologies for overlooking the equal height requirement.

If you want to create squares, I'll provide some code and explain it step by step. Let's format this as a list for clarity, assuming the ul has been reset with no margin, padding or style type.

<ul>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
   <li>
      <div>
      </div>
   </li>
</ul>

Below is the CSS code to achieve square elements:

li {
   position: relative;
   width: 33%;
   padding-top: 33%;
}

li > div {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
   width: 100%;
}

The padding value matches the width to make perfect squares. Padding percentage, in any direction, is always based on the parent element's width (similar to margins). Now, let's delve into positioning using CSS.

ul:before,
ul:after {
   content: "";
   display: table;
}

ul:after {
   clear: both;
}

li {
   position: relative;
   width: 33%;
   padding-top: 33%;
   float: left;
}

@media screen and (max-width: 800px) {
   li {
      width: 50%;
      padding-top: 50%;
   }

   li:first-child {
      width: 100%;
      padding-top: 0; /* Adjust height value accordingly */
   }
}

@media screen and (max-width: 400px) {
   li {
      width: 100%;
      padding-top: 100%;
   }
}

Answer 7

Answer №4

I wasn't quite sure why you were considering using display: table;, so I took a different approach that still achieves the same look as the images you provided.

This is the HTML:

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</div>

And this is the CSS:

.container {
    width: 90%;
    margin: 0 auto;
}

.box {
    width: 32.3333%; 
    float: left;
    height: 200px;
    margin: .5%;
}

.box1 {
    background-color: #ff4034;
}

.box2 {
    background-color: #22ff62;
}

.box3 {
    background-color: #24a6ff;  
}

@media screen and (max-width: 900px){
    .box:first-child {
        width: 99%;
    }

    .box:nth-child(n + 2){
        width: 49%;
    }
}

@media screen and (max-width: 436px){
    .container .box {
        width: 99%;
        clear: both;
        margin-bottom: 10px;
    }
}

The final result will closely resemble the images you shared above.

Answer 8

I wasn't quite sure why you were considering using display: table;, so I took a different approach that still achieves the same look as the images you provided.

This is the HTML:

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</div>

And this is the CSS:

.container {
    width: 90%;
    margin: 0 auto;
}

.box {
    width: 32.3333%; 
    float: left;
    height: 200px;
    margin: .5%;
}

.box1 {
    background-color: #ff4034;
}

.box2 {
    background-color: #22ff62;
}

.box3 {
    background-color: #24a6ff;  
}

@media screen and (max-width: 900px){
    .box:first-child {
        width: 99%;
    }

    .box:nth-child(n + 2){
        width: 49%;
    }
}

@media screen and (max-width: 436px){
    .container .box {
        width: 99%;
        clear: both;
        margin-bottom: 10px;
    }
}

The final result will closely resemble the images you shared above.

Answer 9

Answer №5

Have you considered utilizing flex for this?

.parent {
    border: 1px solid #555;
    display: flex;
    flex-flow: row wrap;
}
.dual {
    display: flex;
    flex-flow: row wrap;
    flex: 2 2 550px;
}
.item {
    padding: 20px;
    margin: 10px;
    flex: 1 1 200px;
    min-width: 200px;
}

<div class="parent">
    <div class="item" style="background-color: red">red</div>
    <div class="dual">
        <div class="item" style="background-color: green; flex: 1 1 100px">green</div>
        <div class="item" style="background-color: blue; flex: 1 1 100px">blue</div>
    </div>
</div>

I made adjustments to the sizes to accommodate padding and margins, such as changing ".dual" to be 550px instead of 400px. Additionally, if the combined items are equal in size, they may appear on separate rows in the second column when resizing, so I reduced their size. For a full view, run the snippet or visit the fiddle link, which allows for easier resizing and includes extra text explaining how to maintain consistent height in layout 2 with the blue and green boxes.

Answer 10

Have you considered utilizing flex for this?

.parent {
    border: 1px solid #555;
    display: flex;
    flex-flow: row wrap;
}
.dual {
    display: flex;
    flex-flow: row wrap;
    flex: 2 2 550px;
}
.item {
    padding: 20px;
    margin: 10px;
    flex: 1 1 200px;
    min-width: 200px;
}

<div class="parent">
    <div class="item" style="background-color: red">red</div>
    <div class="dual">
        <div class="item" style="background-color: green; flex: 1 1 100px">green</div>
        <div class="item" style="background-color: blue; flex: 1 1 100px">blue</div>
    </div>
</div>

I made adjustments to the sizes to accommodate padding and margins, such as changing ".dual" to be 550px instead of 400px. Additionally, if the combined items are equal in size, they may appear on separate rows in the second column when resizing, so I reduced their size. For a full view, run the snippet or visit the fiddle link, which allows for easier resizing and includes extra text explaining how to maintain consistent height in layout 2 with the blue and green boxes.

What is the best way to design three flexible divs using display: table without the use of JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Importing usernames and passwords from a .txt file with Javascript

Creating a List Item with Equal Height as Its Parent Container

Tips for refreshing Facebook's og tags

Eliminating the need for the horizontal scroll bar on the webpage

Modifying the default hover color of a specific row in AgGridReact

Steps for loading a new page by clicking an input button:

Challenge with modifying CSS variable names in Angular SSR

Tips for implementing a default font on a website

My search bar in the navbar is sticky, but unfortunately it still ends up covering the page content as you scroll down

Having trouble locating a div element with Selenium

Tips for accessing values from a dynamically generated checkbox group using jQuery upon page load

Enhancing User Interaction: Tips for Focusing on Touch in React Input Text Field

Loading jQuery via JavaScript in the head section of the HTML document

Percentage-based framework for CSS grid system

Guide on storing user input data in an array

Converting a Javascript array to an NSArray in Xcode

Creating a mobile-friendly table that remains within a specific width on smaller screens (CSS)

Position floating divs at the bottom of the page

A triangular-shaped div positioned at the bottom with a captivating background image

Preventing the page from auto-refreshing upon button click