my kingdom for a css wiz...

[DiamondLil]

Need some help to figure out what [in the name of all that is holy] I'm doing wrong....

There is some funkiness in my css or on my html page. Footer is supposed to be at the end/bottom of the right & left colums. The colums are supposed to butt up against the footer. This is NOT happening. Anyone know why?

html page is at:

http://www.mc2ads.com/generalindustries/whygi.html

stylesheet is at:

http://www.mc2ads.com/generalindustries/genind_notables.css

 

[dwarfthrower]

As much as I admire your dedication to the CSS cause, tabular data is rendered easiest using plain old tables. You can still control the look and feel of the table elements using css.

As for what you're doing wrong with the css, the footer is set to absolute positioning. If you want it to sit beneath some other element, regardless of the screen resolution you need relative positioning. Therein lies the catch-22. Do that and chances are your footer will not be displayed neatly at the bottom of the screen each time.

A timely point to remember that what is appropriate to a print medium, doesn't always translate that well onto the web.

 

[DiamondLil]

Yes, I spend my life trying to explain to others that print & web are different things, however that does not apply here.

While it was not totally my decision to go completely table-less, there is no reason why this simple design cannot be rendered online with purely css.

I am even more motivated to convert from tables since they are the biggest contributing factor to long download times and they were never meant to be used as layout tools to begin with.

My concern is with the css stylesheet & footer area specifically. When I change the position to relative, it does nothing different. Why?

 

[cian]

#footer {position: absolute; left: 0; bottom: 0; right: 0}

Positioning against the bottom is bottom of screen not bottom of document!

Just place it after the content column something, no need for absolute positioning.
You'll also run into the problem that if your content layer is shorter than your left and right columns things won't match up.
This is one of the most awkward "standard" css layouts. I'd recommend making it that your content div is always longer than the left and right cols. I'd also nest the content div in another div which should be 100% width and underneath the left and right columns, you can then use that to disguise any gaps which appear.

If this helps check out this template:

http://www.ssi-developer.net/main/templates/temps/temp_3col_pixelperfect-whdr-wftr.htm

- É -

http://www.ssi-developer.net

 

[DiamondLil]

cian - thank you, I knew that there was some basic structure I was just not getting right, had no idea what. Let me take a look at the template you linked to see if I can get it clear.
-L

 

[cian]

In that template change the colour of the left and right divs to RED or something and the idea should become quite clear.





- É -

http://www.ssi-developer.net