CODEWITHSUNDEEP
htmlcss
anche
anche

Reputation: 2884

div same height with floats

It seems this issue has been addressed earlier, but none of the solutions seem to work for me.

My current situation: container div set as display:table-row children are set as display:table-cell

all the children now have the same height, as I want to.

My problem: when the window gets resized, not all the divs are visible. How can I make sure the divs are always visible. examples:

Resize progress:

DIV#1 ---- DIV#2 ---- DIV#3 ---- DIV#4 ---- DIV#5



DIV#1 ---- DIV#2 ---- DIV#3 ---- DIV#4 
DIV#5


DIV#1 ---- DIV#2 ---- DIV#3
DIV#4 ---- DIV#5

http://jsfiddle.net/9BC53/2/

I hope this can be solved without the use of JavaScript

EDIT I don't want to specify any height. The div's must be as long as the longest sibling.

Upvotes: 1

Views: 176

Answers (1)

Mr_Green
Mr_Green

Reputation: 41832

There is no need to use display: table-row or display: table-cell.

CSS

div#main {
    display: inline-block;
    /* to clear float */
    overflow: hidden;
}
div.elem {
    float: left;
    background:#ff0000;
    /* same height as intented */
    text-align: center;
    width: 80px;
}
div.elem div {
    width:40px;
}
div#one div {
    background:#111;
}
div#two div {
    background:#444;
}
div#three div {
    background:#777;
}
div#four div {
    background:#aaa;
}
div#five div {
    background:#ddd;
}

Javascript:

var main = document.getElementById('main');
var height = main.offsetHeight + "px";
var children = main.children;
for (var i = 0; i < children.length; i++) {
    var c = children[i];
    c.style.height = height;
}

Working Fiddle

Upvotes: 1

Related Questions