CODEWITHSUNDEEP
cssheight
Martina
Martina

Reputation: 1918

table, td, div heigth 100% doesn't work

I have a problem with my layout. I want 3 columns: the first and the last smaller than the central one.

This is the jsfiddle example: http://jsfiddle.net/CL333/

I have this HTML

 <body>
<div id="container">
    <table>
        <tr>
            <td id="sinistra">
                <div id="divsinistra">sinistra</div>
            <td id="centro"><div id="divcentro">centro</div>
            <td id="destra"><div id="divdestra">destra</div>
    </table>
</div>
</body>

and this CSS

 html{
height: 100%;
 }
body{
height: 100%;
 }

 #container{
min-height: 100%;
width: 100%;    
 }
 #sinistra{
min-height: 100%;
width: 20%;
border: 1px solid red;
 }
 #centro{
min-height: 100%;
border: 1px solid red;
 }
 #destra{
min-height: 100%;
width: 20%;
border: 1px solid red;
 }
 table, table tr{
width: 100%;
min-height: 100%;
 }
 #divsinistra,#divcentro,#divdestra{
min-height: 100%;
 }

the problem is that I would like these columns fit the entire height of the page while in this way they are very small. I don't know where else put another height 100% :( Someone can hel me?
Thanks!

Upvotes: 0

Views: 427

Answers (1)

He Hui
He Hui

Reputation: 2236

you referenced your tags wrongly

html{
    height: 100%;
}
body{
    height: 100%;
}

and table does not work with min-height.

#container{
    height: 100%;
    width: 100%;    
}

check this out

EDIT I also forgot to mention that your html tags weren't closed properly.

<table>
            <tr>
                <td id="sinistra">
                    <div id="divsinistra">sinistra</div>
                </td>
                <td id="centro"><div id="divcentro">centro</div></td>
                <td id="destra"><div id="divdestra">destra</div></td>
            </tr>
        </table>

Upvotes: 2

Related Questions