tags:

views:

72

answers:

4

This is the code. I want to align text at bottom

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px">
   <img width="174" height="116" src="#" style="margin-right:10px;float:left">
   <strong>Text 1</strong>, <br>
   text 2, <br>
   text 3 
</p>

added example to test http://jsbin.com/ubiji/2

+5  A: 

EDIT: your question isn't clear but maybe you want the text to act like a block and have "text 3" the part lined up with the image? If so, this should work:

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">

    <img width="174" height="116" src="#" style="margin-right:10px; vertical-align:bottom">

    <span style="display:inline-block; background: #ff6; vertical-align:bottom">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3
    </span>
</p>
DisgruntledGoat
text goes under image if i remove float
metal-gear-solid
What is not clear in question even after adding example link http://jsbin.com/ubiji/ ?
metal-gear-solid
I think that would work with a float. (BTW, interesting use of <span>; rarely do I see it used that way (^_^)=b ).
Patrick Niedzielski
@DisgruntledGoat - still not working http://jsbin.com/ubiji/4
metal-gear-solid
Any ideas how to do it without using display:inline-block?
Ivan
@jitendra, you need to drop float:left from your image
Ivan
@jitendra, come on now you didn't even implement my code, here is what I put: http://jsbin.com/ubiji/5
DisgruntledGoat
oh ok . will it work in all browser including IE6?
metal-gear-solid
Also to answer why it wasn't clear: First, the example link only shows how it looks at the moment, not how you WANT it to look. Second, saying you want "to align text at bottom" does not really explain it properly - did you only want the first line to align with the image, or the text as a whole block...etc. The left float also indicated you wanted text to wrap around the image.
DisgruntledGoat
no i just added float:left to img because without it text twas going below image
metal-gear-solid
I don't have access to IE6 so you'll have to test it yourself. I do know that IE6 amazingly *does* support `display:inline-block` on inine elements like `span` so it should be fine. You can also add `display:-moz-inline-box;` on the span for Firefox 2, if necessary.
DisgruntledGoat
A: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<title>TITLE</title>
</head>
<body>

<p>Here is your text
<img src="penseur.gif" width="70" height="137" align="bottom" alt="penseur">
at the bottom</p>

</body>
</html>
chacha
That technically isn't standard HTML 4 (or HTML 5). I'd recommend not using the ``align="bottom"''. See http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2
Patrick Niedzielski
@Patrick Niedzielski - this is not working also
metal-gear-solid
A: 

Could vertical-align be what you are looking for?

http://www.w3schools.com/css/pr_pos_vertical-align.asp

<p style="background:#eee;font-size:1.3em;color:#022662;height:116p"">
<img width="174" height="116" src="#" style="margin-right:10px;float:left">
<div style="vertical-align:text-bottom">
<strong>Text 1</strong>, <br>
text 2, <br>
text 3
</div>
</p>

You need the div there, I think.

Patrick Niedzielski
`div` inside `p`
metal-gear-solid
If I took your question correctly, you want the batch of text and the image to be aligned at the bottom. The <div> adds a block that groups the text separately from the image.If you use Chromium, it has a nice feature that allows you to see the block layout dynamically by highlighting it. Something like that may clear it up.
Patrick Niedzielski
@Patrik: I think jitendra meant that `div` inside `p` is not valid HTML. Actually using a `div` didn't work for me.
DisgruntledGoat
@DisgruntledGoat, Oh, sorry, I misunderstood. ^_^
Patrick Niedzielski
+1  A: 

There should be a simple solution to this. There is not.

Some here say vertical-align:text-bottom or just vertical-align:bottom. Like this:

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;">
    <img width="174" height="216" src="#" style="vertical-align:bottom;margin-right:10px;">
    <strong>Text 1</strong>, <br>
    text 2, <br>
    text 3 
</p>

This works as you intend if you only have one line of text, since it's the first line of text that is aligned with the image. This is because <img /> is by default display:inline;. If you only have one line, go for it.

If you need a more robust solution, use positioning.

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

This works in IE7 Standards mode, and IE8 Standards mode. Also in Firefox etc... Note that the left-position is left out, to just default to where it should be without position:absolute;

Due to the fact that hasLayout isn't true in Quirks mode in IE6, 7 and 8, the solution doesn't work either. You have to give it 'layout' by giving it a dimension with height or width, or just fall back to the old faithful zoom:1;

<p style="background:#eee;font-size:1.3em;color:#022662;height:116px;position:relative;zoom:1">
    <img width="174" height="216" src="#" style="margin-right:10px;">
    <span style="position:absolute;bottom: 0;">
        <strong>Text 1</strong>, <br>
        text 2, <br>
        text 3 
    </span>
</p>

There you have it.

Glenn Nilsson
Elegant answer! It works fine for me.
Patrick Niedzielski