CODEWITHSUNDEEP
htmlcss
gelolopez
gelolopez

Reputation: 174

Word wrapping around image using floats

can somebody help me with my problem? I am trying to float the .imgfloat so that p.lead wraps around it. Here are the codes

<article>
       <div class="imgfloat">
       </div>
       <p class="lead">To continue our visual clues about editable and non-editable 
        regions, give the second row a slightly lighter gray background (since it is 
        editable, but only in the 1st-level template), and the nested table a white 
        background (since it's editable in both). 2nd_level_template.dwt should now
        look something like Figure 5.To continue our visual clues about editable and
        non-editable regions, give the second row a slightly lighter gray background 
        (since it is editable, but only in the 1st-level template), and the nested
        table a white background (since it's editable in both). 2nd_level_template.dwt
        should now look something like Figure 5.
        </p>
</article>

CSS

article p{
    text-align:left;
    float:left;
}

.imgfloat{
    float:right;
    height:200px;
    width:300px;
    background-color:#ccc;
}

But the result is like this:

enter image description here

Upvotes: 1

Views: 55

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

Don't float the text then.

By removing float:left from article p, the text will naturally wrap around the img element, which is floated, and thus removed from the flow.

EXAMPLE HERE

article p {
    text-align:left;
}
.imgfloat {
    float:right;
    height:200px;
    width:300px;
    background-color:#ccc;
}

Upvotes: 4

Related Questions