JayJay JayJay - 5 months ago 27
Javascript Question

How to create two columns (one with two rows and other with one) without using fixed sizes?

I've successfully created two columns with various number of rows, however, I don't want to use fixed sizes. Is it possible without Javascript?

Here's my code:

HTML:

<body>
<div class='table'>
<div class='cell'>
<div class='row'>test</div>
<div class='row'>test</div>
</div>
<div class='cell'>
test
</div>
</div>
</body>


CSS:

body
{
font-size: 20px;
color: white;
background-color: black;
}
.table
{
width: 100%;
height: 500px;
background-color: yellow;
}
.row
{
background-color: red;
height: 50%;
}
.cell
{
width: 50%;
float: left;
height: 100%;
background-color: blue;
}


Preview: https://jsfiddle.net/XyYND/22/

Answer

You just need to add height:100% to your other elements.

Here's an updated fiddle: https://jsfiddle.net/XyYND/23/

And the CSS:

html {
height:100%;
}

body
{
    font-size: 20px;
    color: white;
    background-color: black;
    height:100%;
}
.table
{
    width: 100%;
    height: 100%;
    background-color: yellow;
}
.row
{
    background-color: red;
    height: 50%;
}
.cell
{
    width: 50%;
    float: left;
    height: 100%;
    background-color: blue;
}

And the HTML:

<body>
<div class='table'>
    <div class='cell'>
        <div class='row'>test</div>
        <div class='row'>test</div>
    </div>
    <div class='cell'>
           test
    </div>
</div>
</body>