tags:

views:

29

answers:

3

Hi. I have this code :

<body> 
    <div> 
        <div id="ROOT" > 
            <div id="ROOT_0" > 
                header  
            </div> 

            <div id="ROOT_1" > 
                <div id="ROOT_1_0>
                    Hi<br />
                    My<br />
                    Name<br />
                    Is<br />
                    Marco<br />
                </div

                <div id="ROOT_1_1>
                    I<br />
                    am<br />
                    Marco<br />
                </div>
            </div

            <div id="ROOT_2" > 
                footer
            </div> 
        </div> 
    </div>
</body>

as you can see, ROOT_1_0 and ROOT_1_1 are in ROOT_1 but they have different height. Can i put the same height without using the height: attribute? cheers

A: 

I assume you don't want to use heightbecause you don't know how many pixels to fill in, but try height: 100%.

Júlio Santos
yeah, in fact i don't know how many pixels i must fill in. I tried to put height:100%; on ROOT_1_0 and ROOT_1_1 but it doesnt work :(
markzzz
+1  A: 

First, you should fix the bad markup (no closing quote in id="ROOT_1_0>, no closing greater than symbol on </div, et cetera) in your example HTML.

Second, I recommend specifying a min-height for both of your boxes in ems. Ems are relative to the font size of the current element, so they're expandable. If IE6 is a concern, you can specify height and overflow: auto; for just IE6.

If ROOT_1_0 and ROOT_1_1 are supposed to be next to each other (say, by changing the width and floating them), consider using faux columns.

KatieK
uhm. This will work only if use some image as background. But i use only background-color :(
markzzz
uhm...i've resolved! Thanks to faux columns! And thanks to you ;)
markzzz
A: 

I hope It will help you

http://www.templatespoint.com/blog/2010/10/div-height-100-percent/

Eswar
How does this article (from your own website) add to the answer that Júlio Santos wrote?
KatieK