Image inside text block

Question

I am trying to code this block of text with image in it but for some reason it's not working for me as. What would be the best approach to get this right with CSS? Thank you all!

UPDATE

This is what I got the problem is with that the underline heading http://jsfiddle.net/C2kqR/

.block h3{
    margin-bottom: 0.6em;
    margin-top: 0;
    color: #c80006;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1.2em;
    font-family: 'Signika', sans-serif;
    text-rendering: optimizeLegibility;

}

.heading {
    margin-bottom: 20px;
    color: #c80006
}

.aleft {
    float:left; 
    margin:0 2em 0 0 !important;
}

.hr-line-full {
    width: 100%;
    margin: 22px 0 35px;
    display: block;
    border-top: 1px solid #dedede
}

Can you share the current code in jsfiddle for us to look at. — Vivek Viswanathan, Nov 14 '13 at 10:06
possible duplicate of [How to wrap text around an image using HTML/CSS](http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css) — Ruddy, Nov 14 '13 at 10:10

score 3 · Answer 1 · answered Nov 14 '13 at 10:06

3

Have a look at this fiddle

CSS:

img{
    float:left;
    margin:0 10px 10px 0;
}

As long as the text and image are within a parent container, simply float the image left to have the text wrap around it. To Space it apart from the text, give it a margin and voila!

answered Nov 14 '13 at 10:06

SW4

69,876
20
132
137

Thanks but my problem is that my underlined heading goes over the image. Is that possible to fix? – Nesta Nov 14 '13 at 10:21

score 2 · Accepted Answer · answered Nov 14 '13 at 10:27

I have a solution for you where you can remove the hr element you are trying to imitate and instead use border for the h3.

Changed CSS for .heading:

.heading {
    margin-bottom: 34px;
    padding-bottom: 24px;
    color: #c80006;
    border-bottom: 1px solid #dedede;
    overflow: hidden;
}

Fiddle here

Image inside text block

2 Answers2