0

I have a problem with floating text around a list of images.

My Goals:

  • At the begining of the content-div is a list of image tags.
  • The Images have everytime the same size.
  • Each image has it´s fixed position on the page.
  • The text should start at the top of the page.
  • The text should float around the images.

HTML

<div class="content">
  <img src="image_1.jpg" class="image_1">
  <img src="image_2.jpg" class="image_2">
  <img src="image_3.jpg" class="image_3">
  <img src="image_4.jpg" class="image_4">
  <img src="image_5.jpg" class="image_5">
  <!-- some text -->
</div>

CSS

.content{ position: relative; width: 500px; margin: auto; }
img{ position: absolute; width: 250px; }
.image_1{ top: 20em; left: 0; }
.image_2{ top: 70em; right: 0; }
.image_3{ top: 120em; left: 0; }
.image_4{ top: 170em; right: 0; }
.image_5{ top: 220em; left: 0; }

The positions of the images is perfect, but the text is not floating around them.

Is it possible to get this done with css and if it is possible how to do it?

Expected HTML:

http://jsfiddle.net/31cu5c1x/

Expected Result:

http://jsfiddle.net/r341ej1r/

Frank Mohaupt
  • 95
  • 1
  • 7
  • http://jsfiddle.net/jessikwa/rnLf75g2/ I don't expect that this is the solution you're looking for, but is this display the effect that you're looking for? – jessikwa Dec 29 '14 at 14:40
  • @jessikwa The result that I expected is this http://jsfiddle.net/r341ej1r/ But to get this result the format is like this: but i want a format like this but with the same result – Frank Mohaupt Dec 29 '14 at 15:02
  • I don't believe this can be accomplished. Is it absolutely necessary for all the text to come after the images? – jessikwa Dec 29 '14 at 15:23
  • Yes it´s necesary. I want to build the page with php, without knowing the length of the text or the number of images. This is up to the content author. So I want to create something like a template where the first image is everytime at the same position and the second to the fifth are also at the same position if they are there. And then should the text float all around this images. – Frank Mohaupt Dec 29 '14 at 15:27
  • I know little about PHP, so I'm not sure how you'll have everything set up, but perhaps do something with Javascript that checks how many images are going to be added to the DOM and dynamically inserts them every certain number of characters, alternating between left and right floats? – jessikwa Dec 29 '14 at 15:35
  • I want to prevent to count characters and then insert the image. I can do this with php too but it is so much code and it is error-prone. I have to parse the text and only count the text between html tags then find the position after x chars, while the character at position x not has to break the word etc. so many places where can happen bugs. – Frank Mohaupt Dec 29 '14 at 16:35
  • Agreed, it isn't an optimal approach. I hope someone is able to suggest a better one! – jessikwa Dec 29 '14 at 18:09

1 Answers1

2

I think you can accomplish this by just using floats and clearing each float after the image and text.

HTML

<div class="content">
  <img src="http://placehold.it/250/000000" class="image_1"/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div class="clear"></div>
  <img src="http://placehold.it/250/ccc" class="image_2"/>
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  <div class="clear"></div>
  <img src="http://placehold.it/250/222" class="image_3"/>
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  <div class="clear"></div>
  <img src="http://placehold.it/250/eee" class="image_4"/>
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  <div class="clear"></div>
  <img src="http://placehold.it/250/555" class="image_5"/>
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div class="clear"></div>
</div>

CSS

.content{ width: 500px; margin: auto; }
img{ width: 250px; }
.image_1{ top: 20em; float: left; }
.image_2{ top: 70em; float: right; }
.image_3{ top: 120em; float: left; }
.image_4{ top: 170em; float: right; }
.image_5{ top: 220em; float: left; }
.clear { clear: both; }

I'm still learning, but maybe this will help. Here's a fiddle: http://jsfiddle.net/om7qfebz/

  • Thank you for your answer but in your answer you write the text between the images. That is not what I want. I want to have a list of images at the beginning of the html and style the positions for this images with css and than have the text block that is below all image tags in the html float around all images. – Frank Mohaupt Dec 29 '14 at 14:52