Positioning Text And Images Horizontally

[OtagoHarbour]

I would like to position an image on the left and have a block of text on its right. Rather like ______________|........................||........................| Some text|........................||........................| Some more text|........................||........................|---------------------Caption under the image.It seems that align does it, to some extent but it has been deprecated. I tried <img style="float:left" /> but it positions all the text on the right, including the text that is supposed to go below the image: even the page footer. Here is the code I tried

 <p><img src="BackgroundColorBar.jpg" alt="Background" style="float:left" /> Text that is supposed to go be on the right of the image.</p><p>  <br /> Text that is supposed to go be below the image.   <br /> </p>

But all the text is on the right of the image. My main problem is separating the text that is supposed to be on the right of the image from the text that is supposed to be below the image.Many thanks in advance for any help,Peter.

[Drycodez]

What are you trying to do? I dont realy understand. The html you are using at present, looks ok to me!

[OtagoHarbour]

What are you trying to do? I dont realy understand. The html you are using at present, looks ok to me!

I would like some text to the right of the image and some underneath. Unfortunately, it currently comes out as ______________|........................|Some text|........................|Some more text |........................|Caption under the image.|........................|Page footer (with copyright, tos, etc) |........................||........................|---------------------Thanks,Peter.

[Drycodez]

By default, when you float an img to left and the text that floated right exceed the height of the image, some of the text flows under the image. if that is what you are talking about, then it is normal. To prevent that from happening, make sure the text don't exceed the height of the image, but if you have more text that ll exceed the height of of the image, just give the image margin-bottom to extend the height of the img.

[mr_mars2011]

p><img src="BackgroundColorBar.jpg" alt="Background" style="float:left" />Text that is supposed to go be on the right of the image.</p><p style="clear: left"> <br /> Text that is supposed to go be below the image. <br /></p>

Adding clear: left to the second paragraph seems to fix it.

[Juventino69]

Hi, Try the code below. You can use also for the picture. You can set the position with the left attribute. <div style="position:absolute;top:10px;left:10px"><img src="logo.jpg"></img> </div><div style="position:absolute;top:10px;left:300px"><h1>This is foo!</h1><p>This is a paragraph of text. Yo<p></div>Should you find any issue please let me know. Regards, Gaspare

I would like to position an image on the left and have a block of text on its right. Rather like ______________|........................||........................| Some text|........................||........................| Some more text|........................||........................|---------------------Caption under the image.It seems that align does it, to some extent but it has been deprecated. I tried <img style="float:left" /> but it positions all the text on the right, including the text that is supposed to go below the image: even the page footer. Here is the code I tried

 <p><img src="BackgroundColorBar.jpg" alt="Background" style="float:left" /> Text that is supposed to go be on the right of the image.</p><p>  <br /> Text that is supposed to go be below the image.   <br /> </p>

But all the text is on the right of the image. My main problem is separating the text that is supposed to be on the right of the image from the text that is supposed to be below the image.Many thanks in advance for any help,Peter.

[OtagoHarbour]

By default, when you float an img to left and the text that floated right exceed the height of the image, some of the text flows under the image. if that is what you are talking about, then it is normal. To prevent that from happening, make sure the text don't exceed the height of the image, but if you have more text that ll exceed the height of of the image, just give the image margin-bottom to extend the height of the img.

That's not my problem. I want to force text to be under the image but it all at the side.

[OtagoHarbour]

p><img src="BackgroundColorBar.jpg" alt="Background" style="float:left" />Text that is supposed to go be on the right of the image.</p> <p style="clear: left"><br /> Text that is supposed to go be below the image. <br /></p>

Adding clear: left to the second paragraph seems to fix it.

I tried that. Everything is still on the right hand side of the image.

[OtagoHarbour]

Hi, Try the code below. You can use also for the picture. You can set the position with the left attribute. <div style="position:absolute;top:10px;left:10px"> <img src="logo.jpg"></img> </div> <div style="position:absolute;top:10px;left:300px"> <h1>This is foo!</h1> <p>This is a paragraph of text. Yo<p> </div> Should you find any issue please let me know. Regards, Gaspare

Thank you for your help and sorry for my tardy reply. I had to use position:relative to get the image in the right position. I found that if I used

<img src="BackgroundColorBar.jpg" alt="Background" style="float:left">

everything would be on the side. If I used

<img src="BackgroundColorBar.jpg" alt="Background">

everything would be on the bottom. Is there a way to turnstyle="float:left"on and off? I tried

<img src="BackgroundColorBar.jpg" alt="Background"><span style="float:left">Some text.</p></span>

but that didn't work. Thanks,Peter.

[ShadowMage]

Add overflow: auto; to the img container paragraph. Floated items don't count towards calculating a container's dimensions so the paragraph is actually much smaller than it should be. The overflow corrects that (though, the reason why remains a mystery to me )

[OtagoHarbour]

Thanks but that doesn't fix the problem. I want some text to go at the right hand side of the image but I want other text to go at the bottom long before the text on the right gets to the bottom. I wish they hadn't deprecated "align". It does not appear that there is anything good to replace it with. I essentially want something like a panel on the RHS but is seems that panels are not used any more. Thanks,Peter.

[Drycodez]

There replacement for align, is text-align (css style property).

[dsonesuk]

Lets stop for moment here, most of the replies giving here should have worked? So how are you viewing these amendments, what browser are using? This sounds similar to someone viewing there work through Dreamweavers preview pane, which never give a true representation of what it will look like viewed through browser.

[OtagoHarbour]

There replacement for align, is text-align (css style property).

I triedstyle="text-align:top"but it does not have the same effect asalign="top" Thanks,Peter.

[OtagoHarbour]

Lets stop for moment here, most of the replies giving here should have worked? So how are you viewing these amendments, what browser are using? This sounds similar to someone viewing there work through Dreamweavers preview pane, which never give a true representation of what it will look like viewed through browser.

I'm using FireFox as a Browser and writing html code in Crimson Editor. I am not using any WYSIWYGs. Thanks,Peter.

[Drycodez]

I triedstyle="text-align:top"but it does not have the same effect asalign="top" Thanks,Peter.

text-align/align is not ment for aligning inline elements verticaly (top and down), but horizontaly (left and right).

[OtagoHarbour]

text-align/align is not ment for aligning inline elements verticaly (top and down), but horizontaly (left and right).

I've found that

style="vertical-align:text-top"

works. Sort of. But the text doesn't wrap around so, if there is a lot of text, it just stops at the end on the page and there is no new line. Adding a break tag puts the following text under the image. Another problem is that, if the screen is small as with a mobile, it doesn't scroll to include the text of the right of the image.

[OtagoHarbour]

Add overflow: auto; to the img container paragraph. Floated items don't count towards calculating a container's dimensions so the paragraph is actually much smaller than it should be. The overflow corrects that (though, the reason why remains a mystery to me )

Sorry. I missed your post earlier. I tried

<img src="BackgroundColorBar.jpg" alt="Background" style="overflow:auto; vertical-align:text-top" />

but I still don't get a scroll bar for the text if I reduce the window size. The text just disappears a word at a time. Also, I can only put one line to the right of the image. Thanks,Peter.

[dsonesuk]

?? if want the bottom text to remain at bottom, and when the browser window is resized smaller to the same size of image, you want the right text to move under image and bottom text try example with class .frame. if you require text to remain right without wrapping under image try example with .frame2

 <style type="text/css">p {margin: 0.9em 0 ;}.frame {overflow:hidden;min-width: 296px;}.frame img{margin-top:0.9em;}.frame div {float:left; width: 296px; margin-right:10px;}.frame div p {margin-left:0;}.frame2 {overflow:hidden;  }.frame2 img{margin-top:0.9em;}.frame2 div {float:left; width: 296px;}.frame2 p {margin-left:306px;}.frame2 div p {margin-left:0;}</style>

<div class="frame"><div><img src="BackgroundColorBar.jpg" alt="Background" /><p>Text that is supposed to go be below the image.</p></div><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p></div><div class="frame2"><div><img src="BackgroundColorBar.jpg" alt="Background" /><p>Text that is supposed to go be below the image.</p></div><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p></div> 

[OtagoHarbour]

<div class="frame2"><div><img src="BackgroundColorBar.jpg" alt="Background" /><p>Text that is supposed to go be below the image.</p></div> <p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p></div> 

I used this option. Now the text that is supposed to be on the right is on the right and the text that is supposed to be underneath is underneath. Thanks very much. One change I made was to use

.frame2 div {float:left; width: auto;}

in the .css file. My wife also suggested using tables. I guess that would be another way to do it. Thanks,Peter.

[OtagoHarbour]

Unfortunately I have just noticed that, if

<p>Text that is supposed to go be below the image.</p>

is replaced by a longer block of text (longer than about one line) then the text that is supposed to be on the right falls down below the the text on the bottom. Thanks,Peter.

[dsonesuk]

Well it would do, by changing the width to auto, the div width will expand to take the content that is placed in to it, breaking the layout you originally had. I would set a fixed width for image, so any image will stretch or shrink to this set width, and make the div width the same.

.frame2 {overflow:hidden;  }.frame2 img, .frame2 div { width: 296px;}.frame2 img{margin-top:0.9em;}.frame2 div {float:left;}.frame2 p {margin-left:306px;}.frame2 div p {margin-left:0;}

<div class="frame2"><div><img src="BackgroundColorBar.jpg" alt="Background" /><p>Text that is supposed to go be below the image.</p></div> <p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p><p>Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image. Text that is supposed to go be on the right of the image.Text that is supposed to go be on the right of the image.</p></div>

[ShadowMage]

Sorry. I missed your post earlier. I tried

<img src="BackgroundColorBar.jpg" alt="Background" style="overflow:auto; vertical-align:text-top" />

but I still don't get a scroll bar for the text if I reduce the window size. The text just disappears a word at a time. Also, I can only put one line to the right of the image. Thanks,Peter.

Put the overflow on the image's container not the image itself. The text and the image are in the same container (ie, <p>) correct? If you add overflow to the container, and float the image, you should achieve the desired result.