1

Hi there I am not sure how to go about a particular problem so here it is. Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.

So far I have tried this:

<div id="container">
 <p>
  Some Text
  Some Text
  Some Text
  Some Text
 </p>
 <p>
 <img src="image.jpg"/>
 </p>
</div>

I use a separate stylesheet and have tried such things as display inline with no luck.

I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.

Thank you.

Delta_Cmdr
  • 180
  • 1
  • 5
  • 16

4 Answers4

2

You need another set of containers indie your container:

<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )

You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)

#container { 
  display: flex;
}

For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.

And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies

MisterJ
  • 919
  • 1
  • 9
  • 24
0

If I understand what you're wanting to do. You could give the

tag a class/style and do float:right in the CSS. Which would look like this:

<p style="float:right;"><img src="image.jpg" /></p>
TheTC
  • 677
  • 9
  • 19
0

Do yo want text flow around image? If yes then it is something like this:

http://jsfiddle.net/2FMPf/1/

If you want separate column for image, then it is something like this:

http://jsfiddle.net/2FMPf/2/

Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27
  • It seems that no matter what I try it can't be done without using a table. using float no matter if I float to the left or right produces some weird layouts with the rest of my css for example it always leaves a line above the text or image and positioning becomes difficult – Delta_Cmdr Nov 03 '11 at 22:29
  • Thanks for all the excellent suggestions but each one comes with complications it seems that what I am trying to do which I think I haven't explained correctly can't be done without a table. – Delta_Cmdr Nov 04 '11 at 10:24