Using div elements to mimic the layout of tables with row spans

Question

Using div elements to mimic the layout of tables with row spans

<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

.box1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.box2, .box3 {
    border: 1px solid green;
    width: 100%;
}

If you can help, please take a look at my code on JS Fiddle

I am trying to make box 1 extend the height of both boxes 2 and 3, similar to using rowspan in tables.

My knowledge of divs is not advanced enough to solve this issue, so any assistance would be greatly appreciated!

Thank you!

css

Answer 1

Answer №1

If you want to avoid stretching issues, consider using the table/table-cell display css options.

UPDATED: Resolved stretching problem.

<div style="display:table">
    <div style="display:table-cell;height:100%;" class="div1">
        1
    </div>
    <div style="display:table-cell;width:100%">
        <div class="div2">2</div>
        <div class="div2">3</div>
    </div>
</div>

Check out the JSFiddle link for a demonstration: https://jsfiddle.net/pho5p7cc/8/

Answer 2

If you want to avoid stretching issues, consider using the table/table-cell display css options.

UPDATED: Resolved stretching problem.

<div style="display:table">
    <div style="display:table-cell;height:100%;" class="div1">
        1
    </div>
    <div style="display:table-cell;width:100%">
        <div class="div2">2</div>
        <div class="div2">3</div>
    </div>
</div>

Check out the JSFiddle link for a demonstration: https://jsfiddle.net/pho5p7cc/8/

Answer 3

Answer №2

If I were tasked with this problem, my approach would be to envelop all existing div elements within a parent div and then adjust the size using css positioning.

For instance, check out this example, http://jsfiddle.net/tjgerot/v2469Leu/

<div class="table">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div2">3</div>
</div>

Answer 4

If I were tasked with this problem, my approach would be to envelop all existing div elements within a parent div and then adjust the size using css positioning.

For instance, check out this example, http://jsfiddle.net/tjgerot/v2469Leu/

<div class="table">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div2">3</div>
</div>

Answer 5

Answer №3

To create a layout where DIV 2 and DIV 3 are in the same container, you can use CSS to adjust the margins accordingly. One way to achieve this is by placing DIV 1 inside a container and setting a margin on the left side of the container to make space for DIV 1. While this approach may not be the most elegant, it gets the job done. Check out this demo on JSFiddle.

Here's how your HTML markup should look:

<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
<div class="div2">3</div>
</div>

And here's the corresponding CSS:

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 50px;
    margin-left:20px;
}
.container{
}

Answer 6

To create a layout where DIV 2 and DIV 3 are in the same container, you can use CSS to adjust the margins accordingly. One way to achieve this is by placing DIV 1 inside a container and setting a margin on the left side of the container to make space for DIV 1. While this approach may not be the most elegant, it gets the job done. Check out this demo on JSFiddle.

Here's how your HTML markup should look:

<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
<div class="div2">3</div>
</div>

And here's the corresponding CSS:

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 50px;
    margin-left:20px;
}
.container{
}

Using div elements to mimic the layout of tables with row spans

Answer №1

Answer №2

Answer №3

Similar questions

The bootstrap table did not meet my expectations as I had hoped

Transition CSS applied only to links containing images

Is it possible for Skycons to show a duplicate icon?

JavaScript Issue Causing Jquery Carousel Dysfunction

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

Ways to expand the width of mat-dialog-actions component in Angular 8

Get the QR code canvas image with a customized background by downloading it

Building a row of five dynamic columns using Bootstrap's responsive design

Tips for creating the X Mark using SVG and CSS

How can I prevent a CSS class from being rendered in a specific view within MVC?

Making the height of two divs equal within the same parent element using CSS

Ways to conceal a div element when the JSON data does not contain a value

Presentation: Positioning Next Buttons Beside Slide Images While Maintaining Responsiveness

Adjust the height to match the shortest sibling child div height

Are you experiencing a strange problem with the CSS button when hovering, clicking, or with the border?

Error: The background image is not displaying correctly on the .net webpage

Using jQuery to manipulate the image within a specific div element

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

CSS from the parent page is not being applied to AJAX-injected content

Express-minify is having trouble loading the CSS file. If we remove a portion of the file, it should be able