CODEWITHSUNDEEP
htmlcsscss-tables
Joe_Maker
Joe_Maker

Reputation: 131

Equal div height using display:table

I have a pretty basic layout utilizing multiple containers and floating divs, I'm also using box-sizing: border-box; to eliminate messy border and padding percentages. I decided to go with the display:table technique to achieve equal div heights, but can't seem to get it to work at all. display:table is applied to the inner container, display:table-row on the cell container, and display:table-cell on the content divs that i want equal heights on. Is this correct?

<!--HTML-->

<body>
<div class="container">
    <div class="inner-container">
        <div class="box">
            <div class="content-1">Nulla facilisi. Duis tristique enim odio, nec        interdum libero egestas ac. Etiam semper, felis ut tempus venenatis, metus augue tempor   lectus, sed vulputate massa ante ac metus. Suspendisse congue quam a odio sagittis  interdum. Sed at metus quis dolor gravida placerat. Phasellus non lectus neque. Nam a urna  feugiat, congue est eget, semper nibh. Aliquam venenatis a felis at volutpat. Fusce  pulvinar pretium nulla, ut cursus lorem placerat sit amet. Vestibulum bibendum rutrum   mollis.</div>
            <div class="content-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu augue ut orci pellentesque adipiscing sit amet ac mauris. Suspendisse porttitor et nisi at malesuada. Proin rutrum erat lacus, nec sagittis magna euismod at. In tincidunt risus felis, ut aliquam massa mattis id. Phasellus pharetra arcu risus, id viverra risus mattis in. Etiam a sem eget nisl feugiat sollicitudin. Morbi eu sollicitudin tortor. Curabitur euismod ultrices odio, id consequat mi lacinia vel. Suspendisse porta urna orci, quis feugiat dui vestibulum id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis semper, libero non vehicula congue, orci enim facilisis nunc, non gravida tellus dui eu nunc. Nullam malesuada malesuada turpis, nec ullamcorper lacus molestie non. Curabitur pretium sit amet ante et adipiscing. Vestibulum et turpis mollis, commodo mi at, laoreet ante.</div>
        </div>
    </div>
</div>    

<!--CSS-->

.container{background:#dedede; float:left; height:1000px;}

.inner-container{background:#cecece; float:left; height:1000px; padding:4%; display:table;}

.box{background:#bebebe; float:left; display:table-row;}

.content-1{background:#aeaeae; float:left; width:48.5%; padding:4% -moz-box-sizing: border-box; box-sizing: border-box; display:table-cell;}

.content-2{background:#aeaeae; float:left; width:48.5%; margin-left:3%; padding:4% -moz-box-sizing: border-box; box-sizing: border-box; display:table-cell;}

JSfiddle showing my current layout: http://jsfiddle.net/34g8E/1/

Upvotes: 0

Views: 55

Answers (1)

skip405
skip405

Reputation: 6279

It's because the float property makes the element block-level. If you inspect a floated element you'll see that the browser uses display: block; in the computed styles... no matter what you write in your css.

So your fiddle might look like this - http://jsfiddle.net/skip405/34g8E/3/

Upvotes: 1

Related Questions