How can I push down the bottom border of parent div with a floating element

HTML & CSS
1

Hello.

I am trying to position an image on the right end of a div, so that text can flow by the left side of it.

Is there anyway I can make it push the border of the parent div down, so it does not float to the left as well?

#testimage { display: inline-block; width: 10%; float: right; }

I have a dashed bottom border for the parent div, and it does not look good if the text has a lower height than the image, not to talk about elements below it.

It is crucial that the image is placed within a div.

2

Also read the CSS faq on floats and clearing to understand the issues here as it is a basic concept that need to be understood or it will trip you up in the future.

And then make your desire div height at 100%

You never want to do that because a) if it works it will limit the element to a height that can’t be exceeded and b) in most cases (*) it won’t work because height for static/relative elements has to be based on a known height of a parent and not on content height.

(* It will however cause IE to clear the floats because it will give the element “haslayout” which makes it behave much like "overflow other than visible does in other browsers and will contain its floated children.)

See the CSS faq on 100% height for more info :slight_smile:

3

Good. There are some times where you won’t want the side-effects of overflow: hidden, but most of the time it will work fine for you.

http://gtwebdev.com/workshop/floats/enclosing-floats.php

4

They are wrapped in a div, but I did not try that. I did however discover the overflow: hidden method for this situation :slight_smile: .

5

Had u try to wrap thé two float div in a div ? And then make your desire div height at 100% and in relativ Positionning…:eye: