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

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

Tips for spinning the background of a button without rotating the button itself

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

Having trouble resolving row border issues with CSS in DataTables?

image in responsive css design

Arrange the items in the last row of the flex layout with equal spacing between them

Using Javascript to Trigger Events on Selection

Styling a parent element when it is in focus using CSS3

Checking and locating elements using Jquery's distinctive style

What methods can be utilized to create sound effects in presentations using CSS?

Leveraging font awesome ttf in conjunction with scss

Tips for utilizing an array within React and transforming it into a component

If the text is too lengthy, enclose it within a div element

Apply a specific style to the initial element generated by *ngFor

Elements not following percentage in top positioning

Is there any practical reason to choose tables over CSS for controlling layouts?

How can I add a drop-down list to a cell within a table?

Detecting Android devices

Tips for updating the class of a button upon clicking it