PDA

View Full Version : HTML and CSS Table Issue



famousamos
Jun 29th, 2009, 08:41 PM
Hello,

I am currently working on my blog at http://lizardsrus.biz and am running into an error with the html table layout. If you visit the link, there is a large gray space between the bottom of the center content area and the top of the footer image. Apparently, setting the height of the entire table to 100% with CSS forces the table to stretch the height of the browser window and that shouldn't happen. As more content is added, the footer should be moved up and down.

A snapshot of the table:


--------------------
| header | 1
--------------------
| main |side | 2
--------------------
| footer | 3
--------------------
Any ideas on a solution and workaround?

Thanks,
Carl

021414
Jun 30th, 2009, 02:31 AM
Try this for the css:



body{
margin:0;
padding:0;
text-align:center;
background-color: #404040;
}

div#header{background:transparent;padding:0;margin:0;border:0px solid blue;height:218px;}
div#footer{background:transparent;}

.container{
width:647px;
margin:0 auto;
padding:0;
}

.content{
float:left;
width:647px;
text-align:left;
background-image:url('http://lizardsrus.biz/blog/images/middle_repeated_part.png');
background-repeat:repeat-y;
padding:0;
}

.leftcolumn{
width:415px;
border:;
}

.lefttable{
width:405px;
}

.tablecontent{
background-color:#333333;
color: #FFFFFF;
font-family: Eurostile, Eurostile Next, 'Square 721', Verdana;
padding:5px;
width:647px;
}
.lttop{
height:39px;
background-image:url(http://lizardsrus.biz/blog/images/top_content.gif);
background-repeat:no-repeat;
border:0;
}

.ltbottom{
height:39px;
background-image:url(http://lizardsrus.biz/blog/images/bottom_content.gif);
background-repeat:no-repeat;
border:0;
}

.rttop{
height:39px;
background-image:url(http://lizardsrus.biz/blog/images/top_sidebar.png);
background-repeat:no-repeat;
border:0;
}

.rtbottom{
height:39px;
background-image:url(http://lizardsrus.biz/blog/images/bottom_sidebar.png);
background-repeat:no-repeat;
border:0;
}

.righttable{
width:173px;
}

.contenttable{
border:0;
}


And... try this for the html:



<body>
<div class="container">
<div id="header"><img src="http://lizardsrus.biz/blog/images/header_new.png" alt="head"></div>

<div class="content">

<table class="contenttable" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="leftcolumn" valign="top">

<table class="lefttable" cellpadding="0" cellspacing="0">
<tr>
<td class="lttop">&nbsp;</td>
</tr>
<tr>
<td class="tablecontent">This is repeated content that should have the footer stuck to the bottom of the white. </td>
</tr>
<tr>
<td class="ltbottom">&nbsp;</td>
</tr>
</table>


</td>
<td class="rightcolumn" valign="top">


<table class="righttable" cellpadding="0" cellspacing="0">
<tr>
<td class="rttop">&nbsp;</td>
</tr>
<tr>
<td class="tablecontent">Hello, my name is Carl and I am working on this blog. </td>
</tr>
<tr>
<td class="rtbottom">&nbsp;</td>
</tr>
</table>


</td>
</tr>
</table>


</div>

<div id="footer"><img src="http://lizardsrus.biz/blog/images/footer.png" alt="footer"></div>
</div>
</body>

abduraooft
Jun 30th, 2009, 09:20 AM
Never use tables for making your layout (http://www.hotdesign.com/seybold/), which is a very stupid approach!

Take a look at a good CSS based 2 column layout at http://bonrouge.com/2c-hf-fluid(r).php

famousamos
Jun 30th, 2009, 02:57 PM
Thanks all for replying promptly!

021414: The code works just as I asked it should.

abduraooft: I will definitely look over the link you provided and remember to stick to divs and floats next time. I still know css better than html right now (unfortunately) and am practicing my skills.

Thank you all again,
Carl