CODEWITHSUNDEEP
css
Otaku Kyon
Otaku Kyon

Reputation: 445

Creating three div containers with exactly the same length without hiding something

I have three widgets. All widgets contain a text with an unknown length. The widgets should be as long as the widget with the longest text.

In this case, the blue and green widget should be longer than they actually are. All widgets backgrounds must have the exact length, without hiding some content.

How can I make this?

.first {width: 24%;float:left; padding:5px; background: blue;}
.second {width: 24%; padding:5px;float:left; background: red;}
.third {width: 24%; padding:5px;float:left; background: green;}
<div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>

Upvotes: 2

Views: 25

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241128

You could use CSS3 flexboxes:

Example Here

.parent {
    display: flex;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
}

Support for flexboxes can be found here.

.parent {
    display: flex;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
}
.first {
    background: blue;
}
.second {
    background: red;
}
.third {
    background: green;
}
<div class="parent">
    <div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>
</div>

Alternatively, you could also use CSS3 tables:

Example Here

.parent {
    display: table;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
    display: table-cell;
}

Support for CSS3 tables can be found here.

.parent {
    display: table;
}
.parent > div {
    padding: 5px;
    width: 33.33%;
    display: table-cell;
}
.first {
    background: blue;
}
.second {
    background: red;
}
.third {
    background: green;
}
<div class="parent">
    <div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
    <div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>
</div>

Upvotes: 1

Related Questions