JayJay JayJay - 23 days ago 8
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>
Comments