2

My question is based on the css: set the height of floating divs as maximum of their heights - Is it possible to fix this jsFiddle with pure css so that all 3 divs that are in the same row have the same height, the maximum of their 3 heitghts?

The solution is here - jsFiddle.

However, I didn't mention I need some margins between elements (as not important and easy to add). As result, display:table-cell solution was suggested. Unfortunately, Margin property is not applicable to display:table-cell elements.

Is it still possible to solve my question with some space between divs with pure css? The original code is here and I want the height of all three divs to be the same and they have some space in between, let's say 3px.

The code is here:

<style>
#main{
    border:1px solid red;
    width:605px;
    overflow:hidden;
}
#zero{
    border:1px solid blue;
}
.small{
    border:1px solid green;
    float:left;
    width:199px;
}
</style>
<div id="main">
    <div id="zero">
        0
    </div>
    <div class="small">
        small text
    </div>
    <div class="small">
        large text large textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge text
    </div>
    <div class="small">
        another small text
    </div>
</div>

And here is the original problem @ jsFiddle.

Again, I would prefer a pure css solution if it is possible.

Community
  • 1
  • 1
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212

2 Answers2

0

You can use border-spacing: 3px; on #main.

JsFiddle

AfromanJ
  • 3,922
  • 3
  • 17
  • 33
0

Hello mate I played a bit with your code and if you remove float left and add display:table-cell; you get the result you want.

As for the margin between divs not sure if its possible with one div class.

Fiddle:

http://jsfiddle.net/7A95U/1/

Bill.

vaskort
  • 2,591
  • 2
  • 20
  • 29