View Full Version : Stretch Cell Background to full length

05-02-2006, 12:52 AM
I have a website that I am working on the layout....

I tried to use a table with four rows,

1st row - banner
2nd row - also banner image
3nd row - has three cells, one left frame image that stretched to full length of the table, one content cell, and one on the right side has a nested table with 5 navigation buttons and some images for spacing and **i made a background image for the listing titles links so they could stretch to however long the list of titles on there is.
4rd row - footer image

**for the background image i have a div around the listing title links like:
background: url(../images/greyBig.gif) repeat-y;

However, the outcome is not exactly what i wanted - I would like to see the background image for those listing title links under the navigation buttons to stretch to the full length of the whole table...

Can somebody help me with this?
I have attached my html code for the layout (there are alot of php stuff in it but it should help to understand my layout logics...)

Thanks so much for helping in advanced!!


05-02-2006, 09:12 PM
Hi Just to follow up with my coding status with the layout problem, I have actually abandon the tables and use css completely - which works much better:


The image margin bottom thing is fixed, however, I am still having trouble to make the module background image (the right where the "title" area is) and the left frame image left of the content body to stretch to the length of the longest content (sometimes the content body is longer than the module title area, and sometime it is the other way around)...is there a solution to this problem?

many thanks!!


05-02-2006, 09:32 PM
[...] I have actually abandon the tables and use css completely [...]
That's great to hear! :thumbsup:

You seem to be still thinking in tables, however... Switching from tables to CSS needs a totally different way of thinking and a totally different approach. Maybe this tutorial (http://bonrouge.com/2c-hf-fixed.php) can clear some things?

05-03-2006, 12:36 AM

Thanks for your suggestion to the link - I have followed the instruction and it turns out much better again:


However, IE6 is still weird...I tried to read the IE Hack on that website but I don't really understand what I need to do to fix the weird floating on the right...

Please help~~~I am almost there!!!! :p


05-03-2006, 01:42 PM
You should think of using hacks as the veeeery, very last option to fix display differences! IE isn't always wrong. In most cases there is a way to work things out without a hack. And so is a way in your case. It is just a matter of using margins and related things correctly.
Now watch carefully and see how the layout changes to our liking when you apply my suggestions. ;)

#main {
margin-right: 10px;
margin-left: 5px; delete the whole rule (in grey)
#right {
margin-right: 25px; remove that line
width: 185px;
text-align: center;

..... (CSS in between here - no change) ........

/*background-image: url(EHBKFimages/greyBigb.gif);*/
background-color: #c7dcf2;
background-repeat: no-repeat;
width: 160px;
margin-top: 10px;
margin-left: 15px; replace those two properties (in grey) with the following one
margin: 10px auto 0;
border:1px dotted #000;
height: 100%;
/*background-color: #009966;*/
text-align: left;

#titlemodule ul{
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 15px;
color: #6633CC;
list-style: none;
padding: 8px 5px 8px 15px;
margin: 0;

And TADAAA! Looks beautiful. :) And no hack at all!

05-03-2006, 04:13 PM
OMG Its done!!!! Thanks soooooo sooooo soooooo soooooo sooooooo MUCH! You have saved my life and taught me aloottt! :D