ThemeShaper Forums » Thematic

[closed]

Footer Hidden Behind #main

(7 posts)
  • Started 3 years ago by Gail
  • Latest reply from Gail
  • This topic is resolved
  1. Gail
    Member

    Greetings All,

    I am really happy with Thematic and the child theme that I've got going. I managed to get two static side bars with a fluid center and it looks very good except . . . . my footer wants to hide behind the #main div and I cannot for the life of me figure out how to get it to drop back down underneath the other page elements where it should be.

    I would be eternally grateful if one of you guys could take a look and steer me towards the right direction. And I am happy to share the css for this layout once this issue is resolved.

    http://tacitus.lunariffic.com/~hogue2/

    Keeping my fingers crossed!

    Posted 3 years ago #
  2. I would suggest taking a look at other 3 column CSS fluid layouts, there are plenty of examples. Honestly, they are a pain in the ass, but doable. I always advise against them, they take way too much effort to really control, but that is just my opinion.

    The 2 biggest problems you are having;

    1) I don't believe you can rely on absolute positioning on any of the 3 columns (#main, #secondary), they should all be floats. The footer is sitting where it is because it is hitting the bottom of your only float (#primary), the other 2 elements won't clear because absolute positioning pulls them out of natural flow.

    2) Also, elements that have a width of 100% and padding will actually be greater than 100%. So you have to style the internal elements with the padding instead, an easy way is to put an extra div inside the 100% container with the padding on the extra div.

    Hehe, search for some 3 column fluid CSS layout examples. What you have up currently isn't easily fixable and most likely will require a complete rework of at least the main column divs, there is a lot of (extra/unneeded markup) which makes it really rough to troubleshoot and provide an easy fix.

    Now back to pulling dead skin off myself, from my nice sunburn. ;)

    Posted 3 years ago #
  3. Looks like I was wrong about the middle section needing a float, but here is an example. http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/ but definitely don't go the absolute positioning route. ;)

    Posted 3 years ago #
  4. yeah i saw this, but weirdly couldn't log in. the #footer doesn't clear the #main div, b/c you're using absolute positioning. there are already 3 column layouts for thematic... do you really need fluid?

    Posted 3 years ago #
  5. Gail
    Member

    Here I am back at this again after working on other projects. The client wants fluid and what the client wants he gets ;-)

    I will look at dynamic drive and see about reworking the divs from absolute to dynamic.

    Thanks so much for taking the time to reply! Hope that sunburn is feeling better, I've forgotten what sun looks like up here in the Pacific Northwest.

    Posted 3 years ago #
  6. sometimes the client needs to be told what he/she wants! :) what you are describing is commonly referred to as the "holy grail" of web design.... people have been chasing it for years b/c it is difficult and elusive.

    i took a stab at fluid layouts
    https://github.com/helgatheviking/Thematic-Adaptive/tree/master/1140gs

    i think i had both my sidebars on the right and i definitely set a max-width at 1140 since i was implementing the 1140 grid onto thematic)... but maybe you can adapt it to your purposes.

    Posted 3 years ago #
  7. Gail
    Member

    You guys are right. I had a talk with the client and bagged the fluid column idea.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.