Search code examples
cssalignmentblock

Image inside text block


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
}

Solution

  • 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