How to keep text and image in a single line inside a div?

Question

I am trying to put title and content in a div vertically parallel to image div, My jsfiddle . But when ever the text content length in increasing the image is coming in next line.

.archive .woocommerce-product-page .grid {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 20px;
}
.card--sub-category.card--product-sub-cat {
    /* display: table; */
    margin: 30px 10px 30px 10px;
    /* background: #ffffff; */
    /* width: 100%; */
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.sub-category-content {
    /* height: 100%; */
    overflow: auto;
}
.sub_category_card__content {
    /* padding-left: 10px; */
    padding-left: 0;
    font-weight: normal;
    /* float: left; */
}
.sub-cat-description .category-desc {
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;
}
.product_post__thumbnail {
    float: right;
}
.product_post__thumbnail img {
    height: 75px;
    width: 75px;
    border-radius: 3px;
    vertical-align: bottom;
    border: 1px solid rgba(0, 0, 0, 0.075);
}

<div class="card--sub-category card--product-sub-cat">
    <a href="http://localhost/ahlihukum2/product-category/business/contracts-and-agreements/" class="sub-cat-page-link">
                        <div class="sub-category-content">
            <div class="sub_category_card__content">
                                <div class="sub-cat-title">
                    <h2 class="sub-category-title">
                            Contracts and Agreements                    </h2>
                </div>
                                <div itemprop="description" class="sub-cat-description">
                    <p class="category-desc">Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs</p>
                </div>
                            </div>
                        <div class="product_post__thumbnail">
                <img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png">
            </div>
                    </div>
    </a>
</div>

I want the text to take all the sapce when there is no image.

Answer 1

I believe that using display: flex would be the best approach here.

Here is a great article on flex -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Find bellow your html code with 2 lines of css. :)

.sub-category-content{
   display: flex;
   align-items: flex-start;
}
 
.sub_category_card__content{
    margin-right: 10px
}

.sub_category_card__content h2 {
    margin: 0;
}

.product_post__thumbnail > img {
    height:  75px;
    width: 75px;
}

<div class="card--sub-category card--product-sub-cat">
  <a href="http://localhost/ahlihukum2/product-category/business/contracts-and-agreements/" class="sub-cat-page-link">
    <div class="sub-category-content">
      <div class="sub_category_card__content">
        <div class="sub-cat-title">
          <h2 class="sub-category-title">Contracts and Agreements</h2>
        </div>
        <div itemprop="description" class="sub-cat-description">
          <p class="category-desc">Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs</p>
        </div>
      </div>
      <div class="product_post__thumbnail">
        <img src="http://perronelawpc.com/cscheader.png">
      </div>
    </div>
  </a>
</div>

Answer 2

Finally achieve it.

    <div class="card--sub-category card--product-sub-cat">
    <a href="http://localhost/ahlihukum2/product-category/business/contracts-and-agreements/" class="sub-cat-page-link">
                        <div class="sub-category-content">
                                    <div class="product_post__thumbnail">
                        <img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png">
                    </div>
                                                <div class="sub-cat-title">
                    <h2 class="sub-category-title">
                            Contracts and Agreements                    </h2>
                </div>
                                <div itemprop="description" class="sub-cat-description">
                    <p class="category-desc">Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs</p>
                </div>
        </div>
    </a>
</div>

and css-

   .card--sub-category.card--product-sub-cat {
    margin: 30px 10px 30px 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.sub-category-content {
    overflow: auto;
    padding-left: 0;
    font-weight: normal;
}
.product_post__thumbnail {
    float: right;
}
.product_post__thumbnail img {
    height: 75px;
    width: 75px;
    border-radius: 3px;
    vertical-align: bottom;
    border: 1px solid rgba(0, 0, 0, 0.075);
}
.sub-category-title {
    font-size: 1rem;
    font-weight: bold;
    color: #484848;
    margin-bottom: 4px;
    padding: 0;
}
.sub-cat-description .category-desc {
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;
}

jsfiddle of my working version

Answer 3

U can try add 'width' and 'float: left' on < p > tag, something like this:

.sub-cat-description .category-desc {

    float: left;
    width: 200px;

    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;


}

if u want to make it responsive, you should change your html structure and apply something like this:

#img_container{
  position: relative;
  float: right;
  width: 150px;
  height: 135px;
  padding: 0px 0px 12px 12px;
}

<div>
  
<p>
  <div id="img_container"><img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula erat augue, non mattis enim pretium non. Morbi sed purus a erat condimentum finibus et a diam. Quisque eleifend felis a pretium lobortis. Aenean eu porta libero. Donec nec ante in felis condimentum dapibus. Nam tincidunt mauris imperdiet posuere ullamcorper. Nam suscipit ex nulla, et ullamcorper ligula lacinia et. Nunc et nulla nunc. Sed vestibulum mi mauris, ut commodo urna porttitor id. Sed quis maximus elit.
</p>

</div>

Answer 4

Try to get your divs to float left or right.

For example:

`<div style="width: 100%; border: 1px solid red;">
<div style="width: 100%; border: 1px solid red;"> link</div>
<div style="width: 100%; border: 1px solid red;"> 
Title
<div>
<p>
<div style=" width: 25%; border: 1px solid red; float: right;.">Pic </div>
<div style=" width: 50%; border: 1px solid red; float: Left;">Text </div>
</p>
</div></div>
</div>`

Answer 5

This can be achieved generally by simply placing the image inside of the paragraph tags.

<p>Hello, this is some text.
<img src="https://s-media-cache-ak0.pinimg.com/736x/5a/3f/28/5a3f2813a332b8aefdca5069a2ec7b50.jpg" width="100px" />
</p>

https://jsfiddle.net/vnnf7yxz/