gogogadgetearl
06-03-2005, 04: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'> </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?
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'> </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?