aligning images and text side by side

Question

I've got a list of three service items with an image (intended to float left) and a small bit of text (intended to float right). I've got what I thought to be the proper code in place, but it's not working properly and I'm at a loss for what the problem could be.

<ul id="work">
<li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/><p>Service 1 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 2<br/><p>Service 2 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/><p>Service 3 description.</p></li>

#work li {
   list-style-type: none !important;
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

https://jsfiddle.net/feewvmvt/

what does "not working properly" mean? i'm assuming you want the text for each image to be on its own line, hence the br elements and extra p elements? — albert, Apr 06 '16 at 02:15
@albert - Sorry, I could have been a little more clear. You're right - I want each `li` to be it's own line. — winstonclark, Apr 06 '16 at 02:20

score 1 · Accepted Answer · answered Apr 06 '16 at 02:26

1

The issue is that you are nesting  elements:
something something
Swap out the   with a closing  and everything lines up:
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/

answered Apr 06 '16 at 02:26

albert

8,112
3
47
63

The
elements are not nested in the OP's source. The reason your fiddle works is because of the changed CSS, not because of the changed HTML!
– Mr Lister Apr 12 '16 at 18:03
they were, prior to me alerting OP of it, and OP taking action to correct it. – albert Apr 12 '16 at 22:09
No. There is no such thing as a nested
. The
end tag is optional. Leaving a out is not an error. There was nothing to correct. – Mr Lister Apr 13 '16 at 06:28
i never said that omitting the closing p element was an error, i said that was the issue. closing the element, as all elements should be closed, fixed it. you can argue about html5 not requiring closing elements all you want, but a) it was an issue in this example and b) i'll argue back that closing them is best practice for trouble shooting, cross-browser/cross-platform compatibility, readability and portability. – albert Apr 13 '16 at 13:09
You're not listening. p elements do not need to be closed. And if you ever find a browser that has issues with omitted end tags, that browser is _seriously flawed_ and should be uninstalled immediately. And I repeat, the s in your example do not make the difference; you can remove them all and the result will be the same. – Mr Lister Apr 13 '16 at 14:13
you're not listening and wasting my time. i mentioned the why's of closing/not closing elements above. not sure why you chose this hill to die on, but hope its worth it. – albert Apr 13 '16 at 17:07

score 0 · Answer 2 · edited Apr 14 '16 at 23:44

0

Change your float: left and float: right to display: inline-block;

The problem is that floated elements do not take up width and height in their parent. Using inline-block, the parent will expand to fit its children and will push the other elements down to make room.

I tried this out and it worked great.

edited Apr 14 '16 at 23:44

Arvin

92
4

answered Apr 06 '16 at 02:08

nhouser9

6,730
3
21
42

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

First you have two open  tag and just one closing  tag. Kindly fix that.
The issue is because of the elements you are floating inside the li. You need to use clear:both to li.
Please find other ways to clear float elements inside li

**

#work li {
   list-style-type: none !important;
   clear:both;
   
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

<ul id="work">
 <li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/>Service 1 description.</p></li>
 <li><img src="http://placehold.it/350x150" /><p>Service 2<br/>Service 2 description.</p></li>
 <li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/>Service 3 description.</p></li>
</ul>

edited May 23 '17 at 12:07

Community

1
1

answered Apr 06 '16 at 02:44

Pbk1303

3,702
2
32
47

end tags are optional. There is nothing to "fix", because there is no error. – Mr Lister Apr 12 '16 at 18:04
@MrLister: it is optional , but its always best practice to close it. – Pbk1303 Apr 14 '16 at 17:55

score 0 · Answer 4 · answered Apr 06 '16 at 03:28

I think you should wrap your text on a div so you can manipulate it easier. I floated both blocks left and they align nicely. Also if you clear the floats the <li> tag recovers it heights

You could try something like this. Here is the fiddle

HTML

<ul id="work">
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
</ul>

And CSS

#work li {
  list-style-type: none !important;
  margin-bottom: 10px;
}

#work li img {
  float: left;
}

.caption {
  float: left;
  padding-left: 5px;
}

aligning images and text side by side

4 Answers4