How to align text properly inside a parent div?

Question

DEMO LINK

As you can see on the demo above, I'm using this for TIP or DID YOU KNOW type of layout.

I would like to have the text displayed so that when it goes to 2nd line, it starts in same line as the line above, so it doesn't go under the bulb image and is always aligned same for all lines. Also I'd like the TIP to be on top and then text under it.

How can I do this using this code?

Answer 1

just change css

.tip img { 
      float: left; 
    }

Answer 2

What i would do is place the image as the background and use a padding-left to align the image and text. Use a <br /> to place the text beneath Tip :

HTML:

<div class="tip">
    <span><b>Tip:</b></span><br /><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</div>

CSS:

.tip {
    background: #f5f2f2 url('http://s30.postimg.org/ayzw4b465/tip.png') no-repeat left;
    padding: 5px 5px 5px 40px;
    border-left:5px solid #33302c;
    margin-bottom: 20px;
}
.tip span {
font-size: 16px;
}

Example: http://jsfiddle.net/dwrDS/

Answer 3

Or if you want to use it your way, just change css

CSS

.tip img { 
  float: left; padding-right: 10px; 
}
.tip span {
  font-size: 16px;
}