HighDots Forums  

Aligning an image with the bottom of it's container

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Aligning an image with the bottom of it's container in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Listerofsmeg
 
Posts: n/a

Default Aligning an image with the bottom of it's container - 12-14-2004 , 05:34 PM






Hi all,

Is this possible? I have a simple DIV with some text and an image inside.
I want the text to wrap around the image, but I want the bottom of the
image to sit on the bottom of the DIV.

I know the size of the image, but not the size of the DIV.

Many thanks
Lister


Reply With Quote
  #2  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: Aligning an image with the bottom of it's container - 12-14-2004 , 07:59 PM






in comp.infosystems.www.authoring.stylesheets, Listerofsmeg wrote:
Quote:
Hi all,

Is this possible? I have a simple DIV with some text and an image inside.
I want the text to wrap around the image, but I want the bottom of the
image to sit on the bottom of the DIV.

I know the size of the image, but not the size of the DIV.
Easy:

img {position:relative;top:-50px-;float:right;}

<div>text<img height=50></div>

I have no idea if it works. Most browsers seem to move floated box
around, when relatively positioned, but they should first do the
positioning and then floating.

But I could be missinterpreting the spec, this is 3am here and I didn't
check anything well.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>


Reply With Quote
  #3  
Old   
RAM
 
Posts: n/a

Default Re: Aligning an image with the bottom of it's container - 12-15-2004 , 06:20 AM



CSS
..imgPlace{
float:right;
margin:5px 0px 0px 5px;
}

HTML
<div>all the text here...<img src="img.gif" class="imgPlace"/></div>


Reply With Quote
  #4  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: Aligning an image with the bottom of it's container - 12-15-2004 , 07:36 AM



in comp.infosystems.www.authoring.stylesheets, RAM wrote:

[and snipped all text - usual way to make clear that reply don't answer
to any question asked]

Quote:
CSS
.imgPlace{
float:right;
margin:5px 0px 0px 5px;
}

HTML
div>all the text here...<img src="img.gif" class="imgPlace"/></div
Of course, this don't work as OP wanted, mostly becuase image will
overflow.

Try with about 10 lines of text, and image that height is 5 lines, and
you see. What you did was 5px margin to right and bottom of image, that
has no relevance whatsoever.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>


Reply With Quote
Reply




Thread Tools
Display Modes

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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.