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/

Answer 1

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

Answer 2

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.

Answer 3

• First you have two open <p> tag and just one closing </p> 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>

Answer 4

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;
}