CODEWITHSUNDEEP
cssheight
markzzz
markzzz

Reputation: 47947

CSS - having the same height on 2 different div in the same container

<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

Upvotes: 2

Views: 336

Answers (2)

KatieK
KatieK

Reputation: 13843

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.

Upvotes: 1

Julio Santos
Julio Santos

Reputation: 3895

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

Upvotes: 1

Related Questions