three column layout equal height

Question

How to make three column layout having equal height using only css and html (no js)

score 2 · Accepted Answer · answered Apr 07 '11 at 05:40

2

Easiest way is to use faux column background technique.

You can also try giving three divs massive bottom paddings with massive bottom margins with a container with overflow: hidden. It doesn't play nice with inline anchors though.

answered Apr 07 '11 at 05:40

alex

479,566
201
878
984

@abdullah Nope, sorry. If you don't have to support < IE8, use `display: table-cell`. – alex Apr 07 '11 at 05:55
previous one was better.coz, i have to support ie7+ – thecodeparadox Apr 07 '11 at 06:02

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

div {display : table-cell;}

This Could Be Another Solution To The Problem! For More Information, Please See This Link: Is there a disadvantage of using `display:table-cell`on divs?

edited May 23 '17 at 10:33

Community

1
1

answered Sep 12 '14 at 15:07

Khizar Iqbal

435
2
11
18

score 0 · Answer 3 · answered Apr 07 '11 at 05:55

0

<html><body>

<div>

<div style="float:left;height: 33.33%;width:10%;background-color:red">zdfsfs</div>
<div style="float:left;height: 33.33%;width:10%;background-color:blue">zgfsgsgfsgf</div>
<div style="float:left;height: 33.33%;width:10%;background-color:cyan">zvgzcxgvxz</div>
</div></body></html>

answered Apr 07 '11 at 05:55

Poonam

4,591
1
15
20

But what happen when content increase randomly – thecodeparadox Apr 07 '11 at 06:00
I have given small width.you can increase width.and still content is larger then content will come out div and this solution will not work.I will try to find its solution and let you know if I got it. – Poonam Apr 07 '11 at 06:15
thanks. but i think solution given by 'alex' that i accepted is more better. try this. – thecodeparadox Apr 07 '11 at 06:24

three column layout equal height

3 Answers3

Linked

Related