How to force a div to float other elements

V

vgrayster2011-03-27 11:41:17

css

vgrayster, 2011-03-27 11:41:17

Good afternoon, you need to do the following

How to make a DIV marked with questions take into account that there is an image on the left? if you just insert it, then the div border starts from the edge of the parent DIV. and the picture just covers it. And I need the border of the div to be as shown in the picture.

PS: for some reason the picture is not visible, here is its address habreffect.ru/ff4/b5e029e79

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

V

vgrayster, 2011-03-27
@vgrayster

something similar happened to be done by adding to the div , but now the problem is that the text wraps around the problematic div. and I don't need it at all.
float: left; width: 400px;

H

hom9k, 2011-03-27
@hom9k

Hang the div margin-left: <image width + image margin>

M

MSwind, 2011-03-27
@MSwind

.container { margin-left: auto; margin-right: auto; width: 960px; } .for_image { display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 440px !important } .for_text { display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 40px !important }
Something like this... set the width for for_image to the one you really need...

D

Delka, 2011-04-08
@Delka

give this div {overflow: hidden}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
div.block {}
div.block img {float: left;}
div.block div {overflow: hidden;}
/*]]>*/
</style>
</head>
<body>
  <div class="block">
    <img src="http://placekitten.com/200/300" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere orci a dui egestas id lobortis nulla scelerisque. Mauris eu neque sed tellus vestibulum ornare. Vivamus malesuada venenatis lectus, sit amet feugiat quam pretium eget.</p>
    <div>Donec sollicitudin justo et justo commodo</div>
  </div>
  </body>
</html>