Positioning image in 3 column text with CSS

Question

I've used the answer given by Arve Systad (3th answer: flow 2 columns of text automatically with css), to build the following example (part of a bigger file):

<!DOCTYPE html>
<html>

<head>
<style>
#container { 
width: 100%;
margin: 0 auto;
}

div#container p {
text-align: left; 
float: left; 
width: 25.3%;
margin: 2%;
padding: 0px 2% 10px 2%;
height: 500px;
background-color: yellow;
}

.columnh2 {
line-height: 200%;
font-weight: bold;
}

</style>
</head>

<body>

<div id="container">
<p><span class="columnh2">Title of a text</span><br />
A few lines of text<img src="example.png" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 2nd text</span><br />
More text with a different subject</p>
<p><span class="columnh2">Title of 3th text</span><br />
And more text with yet another subject</p>
</div>

</body>
</html>

There is an image in the first column (and there will be in the 2nd and 3rd columns), but it is not positioned the correct way at the moment. I've included a picture of how I would want it, but I can't get it to work with CSS.

How can i fix it?

score 0 · Answer 1 · answered Jan 05 '14 at 14:15

Maybe like that? http://jsfiddle.net/dPUmZ/169/ of course this is an example. If it works you will need to apply it better.

$(document).ready(function () { var size = $("#data > p").size(); $(".Column1 > p").each(function (index) {
      if (index >= size / 2) {
          $(this).appendTo("#Column2");
      }
  });
  $(".Column1, #Column2").append("<img src='http://placekitten.com/50/50'>")   });

score 0 · Accepted Answer · edited Feb 07 '20 at 14:16

Give the image this style:

img {
    display: block;
    margin: 32px auto;
}

Check the fiddle: https://jsfiddle.net/nnKU9/

#container {
  width: 100%;
  margin: 0 auto;
}

div#container p {
  text-align: left;
  float: left;
  width: 25.3%;
  margin: 2%;
  padding: 0px 2% 10px 2%;
  height: 500px;
  background-color: yellow;
}

.columnh2 {
  line-height: 200%;
  font-weight: bold;
}

img {
  display: block;
  margin: 32px auto;
}

<div id="container">
  <p><span class="columnh2">Title of a text</span><br /> A few lines of text<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
  <p><span class="columnh2">Title of 2nd text</span><br /> More text with a different subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
  <p><span class="columnh2">Title of 3th text</span><br /> And more text with yet another subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
</div>

Update:

If you want the images to stick to the bottom (because of unbalanced text), then you need to position the elements. Provide position:relative to the p and position:absolute to the img.

Check this updated fiddle: http://jsfiddle.net/nnKU9/1/

div#container p {
    position: relative;
    ...
}

img {
    position: absolute;
    bottom: 0px;
    left: 25%;
    ...
}

Hope that helps.

Thank you, that works great. However, the images are not aligned to each other now because not every column has the same amount of text. Would it be possible to fix that? Maybe by sticking the image to the bottom of the column? — Glynn, Jan 05 '14 at 20:10

score 0 · Answer 3 · answered Jan 05 '14 at 14:32

0

http://jsbin.com/IfobojAt/2/edit?html,css,output

you can try this. Using float and display property.

answered Jan 05 '14 at 14:32

samuel

38
1
7

Positioning image in 3 column text with CSS

3 Answers3