CODEWITHSUNDEEP
htmlcss
Troy Cost
Troy Cost

Reputation: 67

Image with text inline and stop text wrapping

I think this can be done with floating the image, but I want to see if I can also do it using a suggested answer I seen on this site. That is using inline-block on both the image and span tag and using vertical align to put the text next to the image.

The problem I am having is if I add a paragraph after the span tag, or put too many words inside the span tag then all the text wraps underneath the image. I have tried different properties when I used a paragraph, but that doesn't do it.

The JSFiddle is here.

.iconswrapper {
  background-color: peachpuff;
  margin: auto;
  height: 150px;
  margin-top: 15px;
  width: 90%;
  text-align: center
}
.otherinfo {
  line-height: 2em;
  font-size: 1.5em
}
.wrapcon {
  text-align: left;
  width: 75%;
  background-color: #F6F6F6;
  padding: 3px 0 0 5px;
  margin-left: 10%;
}
.icon img {
  width: 60px;
  height: 50px;
  display: inline-block;
  vertical-align: middle
}
.icontitle {
  font-size: 1.1em;
  display: inline-block;
  vertical-align: top
}
<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
      <span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
    </div>
  </div>

If it is not possible using display inline block, does anyone know what the options are apart from floating the image and using clearfix?

Upvotes: 2

Views: 563

Answers (3)

Stickers
Stickers

Reputation: 78706

You can use CSS table, which has browser support of IE8+, set the container to display:table, and the columns to display:table-cell.

By the way, your HTML is missing a </div>, make sure to fix that.

jsFiddle

.iconswrapper {
  background-color: peachpuff;
  margin: auto;
  height: 150px;
  margin-top: 15px;
  width: 90%;
  text-align: center
}
.otherinfo {
  line-height: 2em;
  font-size: 1.5em
}
.wrapcon {
  text-align: left;
  width: 75%;
  background-color: #F6F6F6;
  padding: 3px 0 0 5px;
  margin-left: 10%;
}
.icon {
  display: table;
  width: 100%;
}
.docs,
.icontitle {
  display: table-cell;
  vertical-align: top;
}
.docs {
  width: 60px;
  height: 50px;
}
.icontitle {
  font-size: 1.1em;
  margin-left: 4px;
}
<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
      <span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
    </div>
  </div>
</div>

Upvotes: 1

Asons
Asons

Reputation: 87221

If you take out the image's width from the span, calc(100% - 68px), it will work as expected, when not, the span will grow to fill its parent's width, hence break line.

.iconswrapper {
    background-color : peachpuff ;
    margin : auto ;
    height : 150px ;
    margin-top : 15px ;
    width : 90% ;
    text-align : center
}
.otherinfo {
    line-height : 2em ;
    font-size : 1.5em 
}
.wrapcon{
    text-align : left ;
    width : 75% ;
    background-color : #F6F6F6 ;
    padding : 3px 0 0 5px ;
    margin-left : 10% ;
}

.icon img {
    width : 60px ;
    height : 50px ;
    display : inline-block ;
    vertical-align : middle 
}
.icontitle {
    font-size : 1.1em ;
    display : inline-block ;
    vertical-align : top;
    width: calc(100% - 68px);
}
<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>

  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg"/>
      <span class="icontitle">
      Duck Cleaning. If you need a duck...
      Duck Cleaning. If you need a duck...
      Duck Cleaning. If you need a duck...
      Duck Cleaning. If you need a duck...
      </span> 
    </div>
  </div>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43584

Add the following CSS rule:

.icon {
  display:flex;
}

See the following Code:

.iconswrapper {
  background-color : peachpuff ;
  margin : auto ;
  height : 150px ;
  margin-top : 15px ;
  width : 90% ;
  text-align : center
}
.otherinfo {
  line-height : 2em ;
  font-size : 1.5em 
}
.wrapcon {
  text-align : left ;
  width : 75% ;
  background-color : #F6F6F6 ;
  padding : 3px 0 0 5px ;
  margin-left : 10% ;
}
.icon img {
  width : 60px ;
  height : 50px ;
  display : inline-block ;
  vertical-align : middle 
}
.icontitle {
  font-size : 1.1em ;
  display : inline-block ;
  vertical-align : top
}
.icon {
  display:flex;
}
<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon"><img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg"/>
      <span class="icontitle">Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck...</span> 
    </div>
  </div>
</div>

Upvotes: 1

Related Questions