View Full Version : CSS Design Help?

06-05-2007, 09:02 PM
CSS Design Help?

Hi, thanks for reading my post.
Iíve posted this thread to hopefully receive help about a little problem I have with my website - If itís solvable.

I have a very simple CSS driven layout but cant seem to work out how to make the footer DIV stay below all inputted text in both DIV sections on my site.
It always stays below any text in the main content table, but if the text in the menu bar is further down than the text in the content table; it seems to still stay below the content text. Therefore making it look very odd as the footer line goes thru any extra text in the menu DIV greater than what is in the content DIV.
Iíve managed to solve this problem by adding the Ďmin-heightí attribute to the content. Here is an example:

#content {
border-right:1px solid #CCCCCC;

This is no problem when viewing in Opera, but when viewed in IE the content border does not stretch down to the footer line unless its filled with text or
<br> is inserted a number of times.

This is my website to help you understand more: www.tabbyondrums.co.uk

Click on the Testimonials page as this hardly has any text in to demonstrate what I mean.
If youíre viewing in opera; everything should look fine. But if youíre using IE then you will notice the border on the right of the content DIV doesnít stretch right down to the bottom near the footer as it does on the home page for example.

Is there any way I could ether make that border on the right of the content DIV always stretch down to the bottom, or some how set it so that itís always below the text/content in the menu DIV?

Please help me; Iíd appreciate it so much!
I donít think this problem will be hard to solve for all those who know what there doing,

If you need me to post my CSS up I will, but Iím sure you guys can get hold of it no probs.

Thanks for youíre time.


06-05-2007, 09:11 PM
Remove the min-height on #content and add clear:both; to the footer. To learn more about clearing floats read this http://www.positioniseverything.net/easyclearing.html
You could use their technique but since you already have the footer there, just use that to clear the floats.

06-05-2007, 09:51 PM
Thanks a lot, but is there any way to make the border on the right of the content DIV stretch to the footer line as it would when full of text?

Thanks again

06-05-2007, 09:54 PM
For that you would need to use a repeating background image. This method is explained here: http://www.alistapart.com/articles/fauxcolumns/

06-05-2007, 10:00 PM
Im not sure i will be able to do that as i dont think my site works like that and i already havea bg image...
Any help?

06-05-2007, 10:02 PM
Yes you can. The background image will go on the #window div. Trust us we know what we are talking about. Make a 1px high image with a 1px gray dot on the far left. The image should be as wide as your right column. Have it repeat in the y direction in the top right of #window. Remove the border on your right column. I suggest you read the article rather than assume something can't be done.

06-05-2007, 10:21 PM
So I take it there is no way of doing it in CSS without the use of an image?
Sorry for assuming.
I don’t doubt that you don’t know what you’re talking about.

I would just like to avoid using images for the layout is possible.

Thanks for your time

06-05-2007, 10:30 PM
No not with CSS. You can do it in javascript but then you will users who have javascript disabled. Its one background image. I don't see what the big deal is.