DIV not correctly sized in TD

boeledi · Oct 11, 2007

Hello,

I have the following problem with DIVs, embedded in table TDs.
In two words, I would like to have one DIV per TD, each of these DIV
taken the full size.
Here is an example:

<html>
<head>
<style>
.clsFull {width:100%;height:100%;background-color:#ff0;border:1px
solid #000;}
</style>
</head>
<body>
<table cellpadding=2 cellspacing=2 border=1 width=90%>
<tr>
<td colspan=4>
<div class="clsFull" style="height:60px;"><p>Header</p></div>
</td>
</tr>
<tr>
<td colspan=2 width=50%>
<div class="clsFull"><p>Left</p></div>
</td>
<td colspan=2 rowspan=2 width=50%>
<div class="clsFull"><p>Right</p></div>
</td>
</tr>
<tr>
<td colspan=2 width=50%>
<div class="clsFull" style="height:100px;"><p>Left 2</p></div>
</td>
</tr>
<tr>
<td colspan=3>
<div class="clsFull" style="height:200px;"><p>Down Left</p></div>
</td>
<td width=25%>
<div class="clsFull"><p>Down Right</p></div>
</td>
</tr>
</table>
</body>
</html>

The result is that everything is correct EXCEPT "Right" et "Down
Right" parts. The corresponding DIVs are not sized correctly in the
sense that it is not 100% width and height.

Could anyone help me?
Many thanks

Andy Dingley · Oct 11, 2007

I have the following problem with DIVs, embedded in table TDs.

So stop doing that. You can style the <td>s too, just as easily as the
<div>s. You don't appear to be doing anything that requires these
extra elements.

Also you're not using a doctype declaration, so your browser will
render in quirks mode. Before worrying about any layout problems,
especially those involving box widths, you must push the browser into
standards mode. I suggest adding the HTML 4.01 Strict doctype
declaration.

Neredbojias · Oct 11, 2007

Well bust mah britches and call me cheeky, on Thu, 11 Oct 2007 12:24:30
GMT boeledi scribed:

Hello,

I have the following problem with DIVs, embedded in table TDs.
In two words, I would like to have one DIV per TD, each of these DIV
taken the full size.
Here is an example:

<html>
<head>
<style>
.clsFull
{width:100%;height:100%;background-color:#ff0;border:1px
solid #000;}
</style>
</head>
<body>
<table cellpadding=2 cellspacing=2 border=1 width=90%>
<tr>
<td colspan=4>
<div class="clsFull"
style="height:60px;"><p>Header</p></div>
</td>
</tr>
<tr>
<td colspan=2 width=50%>
<div class="clsFull"><p>Left</p></div>
</td>
<td colspan=2 rowspan=2 width=50%>
<div class="clsFull"><p>Right</p></div>
</td>
</tr>
<tr>
<td colspan=2 width=50%>
<div class="clsFull"
style="height:100px;"><p>Left 2</p></div>
</td>
</tr>
<tr>
<td colspan=3>
<div class="clsFull"
style="height:200px;"><p>Down Left</p></div>
</td>
<td width=25%>
<div class="clsFull"><p>Down
Right</p></div>
</td>
</tr>
</table>
</body>
</html>

The result is that everything is correct EXCEPT "Right" et "Down
Right" parts. The corresponding DIVs are not sized correctly in the
sense that it is not 100% width and height.

Why do you have a height designation on a div in all but the 2nd row?

Anyway, try adding a height to either the pertinent div or the cell
within which it rests (so your percentage designation has a reference).
This may still not work in the latter case as tables are unruly beasts,
and you should probably nevertheless delimit your non-css values.

Having trouble centering contents of td ?	3	May 2, 2023
How to wrap <td> content .	16	Sep 28, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Clickable Div Block	1	Oct 13, 2023
Javascript DOM	1	Mar 29, 2023
How to have two html audio players on one page?	0	May 3, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023

DIV not correctly sized in TD

boeledi

Andy Dingley

Neredbojias

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads