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

This is a discussion on "vertical-align problems with inline elem. and floated elem." within the Web Page Design section. This forum, and the thread "vertical-align problems with inline elem. and floated elem. are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Closed Thread
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jun 3rd, 2005, 15:18
New Member
Join Date: Jun 2005
Location: Montgomery, AL
Age: 26
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to gogogadgetearl
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'></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?

  #2 (permalink)  
Old Jun 3rd, 2005, 17:38
Reputable Member
Join Date: Aug 2003
Location: United Kingdom
Posts: 341
Thanks: 0
Thanked 0 Times in 0 Posts
can you set the parent container to "position: relative"
then set the footer text child to "position: absolute; left: 0; bottom: 0;"?
  #3 (permalink)  
Old Jun 3rd, 2005, 18:55
New Member
Join Date: Jun 2005
Location: Montgomery, AL
Age: 26
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to gogogadgetearl
man, i should have checked this post an hour ago. that was the exact solution that i just found!! thanx D3mon!!
Closed Thread

Tags
verticalalign, problems, inline, elem, floated

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical Text Align Biddlesby Web Page Design 1 Mar 13th, 2008 22:39
Drop down menu alignment problems. Div wont vertically align. Itsumishi Web Page Design 7 Mar 4th, 2008 04:57
Floated DIV being pushed down in Firefox T34 Web Page Design 4 Jul 20th, 2007 11:57
Div Vertical Align jwalker80 Web Page Design 5 Jan 30th, 2007 23:34
Vertical Align to Bottom tox0tes Web Page Design 7 Jan 16th, 2007 15:36


All times are GMT. The time now is 08:02.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43