css xhtml image div problem

[brakcen]

i'm a bit stumpted on how divs work or maybe it's just my browser, but i use one <div> to create a body section for the updates followed by another <div> for each section of news, however, if i place an image inside the second div and float it, unless the text in that div is longer than the height of the image, the div will cut off where the text ends causing the image to extend past the alotted section. picture a grey box with text inside it and an image aligned to the left but its sticking outside the grey box at the bottom.

http://www.temet-nosce.org

is the site - am i doing something wrong with my divs? maybe a float isn't the right way?

 

[ChrisHunt]

It's not a bug, it's how (in W3C's infinite wisdom) divs and floats are supposed to interact. Floating takes an element outside the flow of a div, so the div does not wait for the end of the image before cutting off.

I saw this discussed recently somewhere. The suggested solution was to put an extra element at the end of your div which clears the element:

<div>
   <img style="float:left" src="mypic.jpg" />
   <p>This text isn't long enough</p>
   <div style="clear:left"></div>
</div>

You can further style that empty div to have 0 height, margin, etc. so the user doesn't see it. You could use some other block-level element instead, of course, an <hr> would be one suggestion.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BillyRayPreachersSon]

Floating anything removes it from the layout, effectively. This means that the DIV height is no longer constrained to the image height.

The real (proper ;o) fix is to attach a "min-height" style to your DIV, but don't expect that to work in IE ;o)

Unfortunatley, if you specify a height on the DIV, and the text size goes over that, the background won't always follow suit in some browsers.

Hope this helps,
Dan

 

[ChrisHirst]

the issue is one of "block" level elements and "text" level elements.

http://www.htmlhelp.com/reference/wilbur/overview.html

at it's simplest, BLOCK elements affect the "flow" of the TEXT and other BLOCK elements in the document.

enclose the image in a floated <div> or you could use a class to set that image to display as a block element (display:block) this however can have some odd effects in different browsers.



Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems