Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical-align problems with inline elem. and floated elem.

    i have a parent container ('footer') where i have 2 child elements. the first ('feeds-techs') is floated right, while the second ('footer_text') is displayed inline to get its top border to display properly. 'feeds-techs' is taller that 'footer_text'.

    what i want is for the container to expand to the height of 'feeds-techs'. i accomplished this using the ":after" pseudo-element. i also want the inline element to rest at the bottom of the container (so that the bottoms of the 2 child elements are even).

    first, i tried to set the parent container to "vertical-align: bottom;" but to no avail. then, i attempted to use "clear: both;" on 'footer_text', but that didn't work in firefox (i'm assuming because it's an inline element) - it also didn't suit the display i wanted since 'footer_text" was then resting below 'feeds-techs'. i also attempted to use the ":before" pseudo-element on 'footer_text' and setting the height to 100%. still didn't work. then i tried to set the 'footer_text' to "margin-top: 100%;" - still nothing (actually, this caused the top border of 'footer_text' to disappear in ie -- ie sucks sooo bad >:-{ ).

    i'm wanting to steer clear of [x]html hacks, like a "<div class='clearboth'>&nbsp;</div>", because that's not very pure css and it doesn't suit my semi-obsessive-compulsive disorder. ;-)

    i'm sure there's a solution out there -- i'll be surprised if you can't solve this problem using pure css.

    if you would like to see the page in question and my code/stylesheets:
    page in question (view source for my xhtml)
    stylesheet (if, for some really odd reason, you need to see my other stylesheets, you'll see their location in the source of my xhtml - you should know where to look)

    any ideas?
    Last edited by gogogadgetearl; 06-03-2005 at 05:05 PM. Reason: typo

  • #2
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    after recent research, i now see that vertical-align is relative to the line-heigt. that explains why some of my solutions didn't work (i think because the floated element doesn't count as part of the line heigt - i may be wrong).

    i finally found a solution. my goal was to find a way, using pure css, to have the inline element rest at the bottom of the container (so that the bottoms of both the floated and inline elements are even).

    i experimented with the "position" and "bottom" properties. after realizing that 'absolute isn't always absolute!' (see section sharing that title on resulting page), i set 'footer' to have "position: relative;" and 'footer_text' to have "position: absolute; bottom: 0px;". this provided the display that i wanted.

    thanx for nuthin guys!! jk!!

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    lol after sleeping last night and woke up, your post came to mind. I was going to give you the exact same solution about getting the footer at the absolute bottom. I actually just posted on something similar to your question.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •