CODEWITHSUNDEEP
htmlcss
Nar
Nar

Reputation: 1

CSS float div vertical fill

I want to float 2 columns but one of the columns is shorter than the other. How do I make them equal length?

Here's an example HTML:

<div class="wrapper">
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
    <div class="left">
        Foo Bar
    </div>
</div>

And here's the CSS:

.wrapper {
    border:1px solid #aaa;
    overflow: hidden;
}

.left {
    width:80px;
    background-color:#eee;
}

.left, .right {
    padding:5px;
    float: right;
}

This is the JSFiddle.

Upvotes: 0

Views: 228

Answers (4)

codingrose
codingrose

Reputation: 15699

Following is one of the methods to achieve this:

HTML:

<div class="wrapper">
    <div class="cell">...</div>
    <div class="cell">...</div>
</div>

CSS:

.wrapper {
    display:table;
}
.cell {
    display:table-cell;
}

See updated fiddle here.

Upvotes: 1

Hendry Tanaka
Hendry Tanaka

Reputation: 464

Try this:

.left {
    float:left;
    width:50%;
    background-color:#eee;
}

.right {
    float: right;
    width:50%;
    background-color:lime;
}

LINK

Upvotes: 1

Brian
Brian

Reputation: 903

You are only applying the width to .left

change to:

.wrapper {
    border:1px solid #aaa;
    overflow: hidden;
}

.left {
    background-color:#eee;
}

.left, .right {
    width:80px;
    padding:5px;
    float: right;
}

Upvotes: 0

pavel
pavel

Reputation: 27092

Not possible in HTML/CSS. You can count higher col height using JS and set to shorter one, or better, you backgrond image and set to parent node.

.wrapper {
    background: url('...'); 
    overflow: hidden; /* due to floating elements */ 
}

Upvotes: 0

Related Questions