0

I'm using DIVs to build something similar to a table, and I need to stretch my DIVs to match the height of its neighbor, in order to get my background-color to display correctly.

Here is my example :

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Some title</title>
    </head>
    <body>
        <div>
            <div style="float:left; width: 49%; background-color: #ced6eb;">
                Line1
                <br/>
                Line2
            </div>
            <div style="float:left; width: 49%; background-color: #dcddde; ">
                Only one line here
            </div>
            <div style="clear: both;"></div>
        </div>
        <div>
            <div style="float:left; width: 49%; background-color: #ced6eb;">
                Something else
            </div>
            <div style="float:left; width: 49%; background-color: #dcddde;">
                Something else
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

What I need is to have the gray background on all 3 lines on the right, instead of getting a blank line in the middle.

This is a simplified version of my HTML. The top left DIV (line1, line2) is of variable length, so a fixed attribute like height:30px is not an acceptable solution.

Thanks !

Yves

Yves Forget
  • 101
  • 3
  • 10
  • Rather than trying to equalise the div heights, you can achieve your goal in a simpler fashion. Simply add a `background-color` of `#dcddde` to your `div`s, the cascading order will take care of the rest. I can't post an answer as your question has been marked as a duplicate, but here: https://codepen.io/Skibbereen-Coderdojo/pen/xgNPxo (I've removed inline stying as its too difficult for me to work with) – Digedu Feb 17 '17 at 22:54

1 Answers1

1

Hi I recommend reading up on equal height columns

This question has been discussed here, and here

Community
  • 1
  • 1
Dataminion
  • 209
  • 2
  • 5