CODEWITHSUNDEEP
css
Johnson
Johnson

Reputation: 1749

CSS - Displaying text to the right of an image

I have the following fiddle: http://jsfiddle.net/q60r6ewq/

ul {
  list-style-type: none;
}
.list-actions {
  display: inline-block;
  margin-right: 10px;
}
<h1>My Website</h1>
<ul class='articles-list'>
  <li class='article-title'>
    <a href="/articles/13-image-article">Image Article</a>
  </li>
  <li class='article-date'>
    <em>By Website Writer - 9/19/2014</em>
  </li>
  <li class='list-actions'>
    <img alt="3613 1274343580 1280x1024 most beautiful space" 
         src="http://www.ehdwalls.com/plog-content/thumbs/1280x1024/space/small/3613-1274343580_1280x1024_most-beautiful-space.jpg"
    />
  </li>
  <li class='list-actions'>
    <p>
      I am trying to upload an image. Let's see if it works.
      Do you like this green square?
      I thought it would be a nice picture to upload.
      It's colorful, among other things.
      <a href="/articles/13-image-article"> Read More</a>
    </p>
  </li>
  <li class="list-actions">
    <a href="/articles/13-image-article/edit">Edit</a>
  </li>
  <li class="list-actions">
    <a data-method="delete" href="/articles/13-image-article" rel="nofollow">
      Delete
    </a>
  </li>
</ul>

In my page, the text shows up below the image

Image
Text

I want the text to be aligned to the right of the image

Image  Text

I thought that calling display: inline-block on the list actions class would solve this, but I guess not.

Upvotes: 0

Views: 65

Answers (2)

ValentinVoilean
ValentinVoilean

Reputation: 1382

You must set the image & description width. Check this : http://jsfiddle.net/q60r6ewq/30/

Also, must be vertically aligned. That's why I suggest you remove the "display:inline-block" and just add "float:left" (this will automatically change the display to block ). You also have to set the paragraph "margin:0" : http://jsfiddle.net/q60r6ewq/32/

        ul {
            list-style-type: none;
            overflow:hidden;
        }

        .list-actions {
            float:left;
            margin-right: 10px;
        }
        .image {
            width:100px;
        }
        .description{
            width:250px;
        }
        .description p{
            margin:0;
        }
        .actionLink{
            float:left;
            margin-right:5px;
        }
<ul class = 'articles-list'>


    <li class = 'article-title'><a href="/articles/13-image-article">Image Article</a></li>
    <li class = 'article-date'><em>By Website Writer - 9/19/2014</em></li>
    <li class = 'list-actions image'><img alt="3613 1274343580 1280x1024 most beautiful space" src="http://www.ehdwalls.com/plog-content/thumbs/1280x1024/space/small/3613-1274343580_1280x1024_most-beautiful-space.jpg" /></li>
    <li class = 'list-actions description'>
        <p>I am trying to upload an image. Let's see if it works. Do you like this green square? I thought it would be a nice picture to upload. It's colorful, among other things.
            <a href="/articles/13-image-article"> Read More</a><br>
            <a class="actionLink" href="/articles/13-image-article/edit">Edit</a>
            <a class="actionLink" data-method="delete" href="/articles/13-image-article" rel="nofollow">Delete</a>
    </p></li>


</ul>

Upvotes: 1

Grice
Grice

Reputation: 1375

You could try moving the <img> tag within the <p></p> block. See snippet below.

Additionally, you could make 2 <div> and have it split the <p> down the middle. This would allow you to do some CSS and have all the text in a single column on the right side.

ul {
  list-style-type: none;
}
.list-actions {
  display: inline-block;
  margin-right: 10px;
}
<h1>My Website</h1>
<ul class='articles-list'>
  <li class='article-title'><a href="/articles/13-image-article">Image Article</a>
  </li>
  <li class='article-date'><em>By Website Writer - 9/19/2014</em>
  </li>
  <li class='list-actions'>
    <p>
      <img alt="3613 1274343580 1280x1024 most beautiful space" src="http://www.ehdwalls.com/plog-content/thumbs/1280x1024/space/small/3613-1274343580_1280x1024_most-beautiful-space.jpg" />
    I am trying to upload an image. Let's see if it works. Do you like this green square? I thought it would be a nice picture to upload. It's colorful, among other things.<a href="/articles/13-image-article"> Read More</a>
    </p>
  </li>
  <li class="list-actions"><a href="/articles/13-image-article/edit">Edit</a>
  </li>
  <li class="list-actions"><a data-method="delete" href="/articles/13-image-article" rel="nofollow">Delete</a>
  </li>
</ul>

Upvotes: 1

Related Questions