Tue, 2005-11-08 20:13
I got a problem with DIVs inside a table. I need the DIV to stretch 100% height in a table cell. But here, the result is a cut off DIV at the bottom.
Any suggestions?
HTML
<HTML> <HEAD> <TITLE>Untitled Document</TITLE> <LINK HREF="PANELS.css" REL="stylesheet" TYPE="text/css" MEDIA="screen" /> </HEAD> <BODY> <TABLE CELLPADDING="0" CELLSPACING="8" BORDER="0" WIDTH="100%" HEIGHT="100%"> <TR> <TD> <DIV ID="P_MAIN"> <SPAN ID="P_HEADER">Header</SPAN> <SPAN ID="P_CONTENT">Content</SPAN> </DIV> </TD> <TD> <DIV ID="P_MAIN"> <SPAN ID="P_HEADER">Header</SPAN> <SPAN ID="P_CONTENT">Content</SPAN> </DIV> </TD> </TR> <TR> <TD> <DIV ID="P_MAIN"> <SPAN ID="P_HEADER">Header</SPAN> <SPAN ID="P_CONTENT">Content</SPAN> </DIV> </TD> <TD> <DIV ID="P_MAIN"> <SPAN ID="P_HEADER">Header</SPAN> <SPAN ID="P_CONTENT">Content</SPAN> </DIV> </TD> </TR> </TABLE> </BODY> </HTML>
CSS
html, body{height:100%;}
body {
min-height: 100%;
padding:0;
margin:0;
color: #333333;
}
#P_MAIN {
width: 100%;
height: 100%;
}
#P_CONTENT {
width: 100%;
height: 100%;
background-color: #FFFFFF;
border-left: 1px SOLID #CCCCCC;
border-right: 1px SOLID #CCCCCC;
border-bottom: 1px SOLID #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#P_HEADER {
background: #CCCCCC;
width: 100%;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
Tue, 2005-11-08 20:43
#1
DIV inside TABLE
First, do not view your code in IE because IE will screw you up. Use Firefox for initial design.
Second, you need a proper doctype to keep all browsers using the same set of 'rules'. You'll see the IE behavior change when you do. Right now FF and IE display your code differently.
Third, use lower case in your tags.
Tue, 2005-11-08 20:45
#2
DIV inside TABLE
Also, validate your code. You have multiply defined 'id's. An id is only allowed once per page. If you must use the same name for each element, use 'class'.