View Full Version : vertical-align problems with inline elem. and floated elem.

06-03-2005, 05:00 PM
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 (http://www.cs.hmc.edu/~mbrubeck/clear-after/#solution-css2-generated-content). 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 (http://www.gogogadgetearl.com/) (view source for my xhtml)
stylesheet (http://www.gogogadgetearl.com/css/styles_master.css) (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?

06-03-2005, 08:53 PM
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!' (http://www.elated.com/tutorials/authoring/css/positioning/) (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!! :p jk!!

06-03-2005, 09:01 PM
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.