473,785 Members | 2,768 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Aligning an image with the bottom of it's container

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

Jul 21 '05 #1
3 2432
in comp.infosystem s.www.authoring.stylesheets, Listerofsmeg wrote:
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:relat ive;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 missinterpretin g 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>
Jul 21 '05 #2
RAM
CSS
..imgPlace{
float:right;
margin:5px 0px 0px 5px;
}

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

Jul 21 '05 #3
in comp.infosystem s.www.authoring.stylesheets, RAM wrote:

[and snipped all text - usual way to make clear that reply don't answer
to any question asked]
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>
Jul 21 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
2184
by: C.W | last post by:
I have a top box element that houses the web site title: #top_section { height: 20px; padding: 10px; text-align: left; background: navy; color: white; }
1
610
by: Larry Viezel | last post by:
http://nominex.com/bottomalign.htm I am viewing this page in IE. The expected behavior is that the image will align to the bottom of the div and that the text will wrap around the image. But alas the image is in a layer over the text. Am I doing something wrong? Is there a way to get the text to wrap? Also, is there a min-height hack for IE that I can get this to work in conjunction with? So that I can set the minimum height of the div...
8
2345
by: Cardman | last post by:
I am hopeful that someone can quickly solve my image alignment issue when things are just not going right and where my attempts to solve this alignment issue have all failed. First of all take a look here... http://www.cardman.com/switches.html In MIE this page looks perfect. Unfortunately both Netscape and Opera show these item photos in the wrong place. For some *unknown* reason all the photos drop down to align with the green...
6
2009
by: tomasio | last post by:
Dear NG-readers, I want to align text right to an image. The last line of text should align with the bottom edge of the image. Unfortunately, the results using my poor CSS knowledge mounted in text which starts at the bottom line of the image and continues below. For an example go here: http://tomasio.at/temp/test_valign.html I want to achieve the following look: http://tomasio.at/temp/correct.html
3
3535
by: Sven C. Koehler | last post by:
Hello, the html below displays a box (#container) with a #footer and an #image inside. Is there any way how I could get rid of declaring max-width and max-height for the #image? The #image should fill up all the space left in the #container. <html><head></head><body><style type="text/css"> #image { max-width: 200px; max-height: 90px; } #container { position: fixed; width: 200px;
3
5630
by: kk.simhadri | last post by:
Hi, I want to align some text to the bottom of page.I am doing this by a CSS class.It contains position:absolute; bottom:0; this does the purpose. but when I resize my page to smaller size, the text at the bottom overlaps my text written in the page above it.
4
2473
by: Corey Walker | last post by:
Hello: I am a webmaster for a non-profit organization. I do know some HTML, but I'm by no means an expert. Recently, many pages on our site were redesigned by a professional web designer, who volunteered his time for a one time improvement. Now, I'm trying to add a new page to our site, and make it look consistent by removing and replacing the text in an existing page. However, in the one page the links at the bottom page are centered...
1
4425
by: tshad | last post by:
In VS 2008, I have in my footer a button, link and 2 images. But they are not displaying in the vertical middle of the row, even though I have it set that way: <asp:Button ID="AddQuestion" Text="Add Question" runat="server" CommandName="AddRow" CommandArgument="AddRow" style=" vertical-align:middle"></asp:Button> <div style="vertical-align:middle; text-align:right">
2
4095
by: studentofknowledge | last post by:
For some unknown reason ie is placing images I have in a div in a weird way. One image is overlapping another but this problem is not occuring in mozilla. I have looked at my code over and over again but cant seem to find out what the problem is. I think this could be fixed with a i.e hack??? please advise the problem of the overlapping image is occuring in imagerow2 div on line 56. please see my code below here is my html <!DOCTYPE...
0
9645
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9480
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10325
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10148
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
7499
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5511
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4053
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3646
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2879
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.