ansaurus

Question

Equal height divs - complicated with multiple backgrounds

Answer 1

+1 A:

Save yourself the trouble and just use tables for the outer layout. They just work.

Here's the table example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>

<head>
<title>left</title>
    <style type="text/css">
        .side { background-color:blue;color:white;width:235px;vertical-align:top;margin:0px;padding:0px;}
        .left3 {padding:0px 0px 0px 17px;vertical-align:top;}
        .mainContent {margin:0px;vertical-align:top;}
        table {width:100%;height:100%;border-collapse:collapse;}
        html,body{width:100%;height:100%;margin:0px;}
    </style>
</head>

<body>
<table>
    <tr>
        <td class="side">left
            <table>
                <tr><td class="side">left side 2
                    <table><tr><td class="left3">Left Side 3</td></tr></table>
                </td></tr>
            </table>
        </td>
        <td class="mainContent">center</td>
        <td class="side">right</td>
    </tr>
</table>
</body>

</html>

Chris Lively 2010-02-22 14:55:41

you mean replacing "all" divs by tables and cells or just "some specific" divs?

ktsixit 2010-02-22 15:01:46

+1 for reality-based answer. Sometimes div/css layouts are more trouble than they are worth.

Ray 2010-02-22 15:04:28

@ktsixit: I generally use a combination of tables and divs. In this case I would use tables to get the heights exactly as I need them. Most of the content areas inside I would do as divs so that they could adjust as necessary.

Chris Lively 2010-02-22 17:57:19

+1. Death to the "death to tables"-crowd!

Wim 2010-02-22 18:11:20

@Chris Lively, I tested the table solution but it works only in firefox. In IE and all other browsers, the tables and cells inside the main wrap table, don't expand their height 100%. They behave just like divs, adjusting their height depending on their contents. Although I have set "height:100%" for all tables and cells.

ktsixit 2010-02-23 08:10:14

@ktsixit: Just added sample code. It works in IE8, FF3.6, Chrome, and Safari. I don't know about other versions of IE or FF because I don't have them. But considering it's HTML 4.01 Strict, their rendering engines ought to do just fine.

Chris Lively 2010-02-23 17:30:02

Also, obviously you can just add your backgrounds as you want..

Chris Lively 2010-02-23 17:31:39

I just saw the new example code you posted. I'll test it. My test version was a bit different that yours

ktsixit 2010-02-25 08:53:21

Answer 2

+1 A:

if you don't mind using javascript/jquery, you can add this to your html:

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt;

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#left_2').height();
    r = $('#right_2').height();
    c = $('#center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#left_2').height(h);
    $('#right_2').height(h);
    $('#center').height(h);
    });
</script>

widyakumara 2010-02-22 15:19:01

I tested what you suggested and it works fine:) Do you think it's risky to use javascript for this issue?

ktsixit 2010-02-23 08:27:43

well, as far as i can tell, no risk at all, as most modern browsers support this, and most people probably enable it [citation needed :P]there are several css only solutions, tho. but sometimes when background images are involved, it's getting tricky, especially cos we have to deal with cross-browsers compatibility.anyhow, check these out:- http://www.ejeliot.com/blog/61- http://redmelon.net/tstme/3cols2/- http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/- http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

widyakumara 2010-02-28 22:39:32

ansaurus

tags:

views:

answers:

Equal height divs - complicated with multiple backgrounds

related questions