how to float image to left that other doesn't go below it?

Question

Can I accomplish this without touching html?

html...

    <div>
    <img src="http://i50.tinypic.com/1zey0j8.gif" alt="" />WALLPAPER
     <span>some paragraph here 
some paragraph here          /*this should not go below the image*/
some paragraph here 
some paragraph here
</span>
    </div>

csss...

div{width: 200px;}
img{float: left; width: 50px; height: 50px;}
span{display: block;}

Edit

Kaloyan Ivanov has given me a best answer. But I would like to know how overflow hidden do the trick?

Change the span to: `span{display: block; float:left; width:150px}` http://jsfiddle.net/BYnLd/4/ — Andrew, Apr 23 '13 at 13:46

score 3 · Accepted Answer · answered Apr 23 '13 at 13:42

3

Add overflow: hidden; to the span.

http://jsfiddle.net/BYnLd/2/

answered Apr 23 '13 at 13:42

Kaloyan

7,262
4
32
47

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

As you may not know what height below the image would be. So use margin-bottom: 100%; to your image

See this fiddle

Edit

As Edited question, I am providing you a link for that

How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

edited May 23 '17 at 12:18

Community

1
1

answered Apr 23 '13 at 13:51

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 3 · answered Apr 23 '13 at 13:43

0

Give your image a bottom margin like:

img {
    float: left;
    width: 50px;
    height: 50px;
    margin-bottom: 200px;
}

jsFiddle example

answered Apr 23 '13 at 13:43

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Apr 23 '13 at 13:44

You should float the span element also to the left. And make sure that it has a maximum width of 150px.

CSS should look something like this:

div{width:200px;}
img{float:left; width:50px;height:50px;}
span{display:block; width:140px; padding-left:10px;}

how to float image to left that other doesn't go below it?

4 Answers4