[Waterman]

Hey there.

I'm just getting started with XHTML and CSS. Can someone have a look at this real quick and tell me how I can get the image to appear in the content box instead of dropping down below the bottom of it?

I'm using nested divs to do the shadow effect and one of the images uses a float css statement to get it to shrink to fit the image. I believe this is called a "float drop" but I'm not sure.

URL:
http://www.kochnook.com/test/index.php?page=photos

CSS file:
http://www.kochnook.com/test/kochnook.css

Any help would be most appreciated. Thanks!

-jbk

[registered_user]

div.shadow1 is floated and that removes it (and its children) from the document's flow. That is to say that its parent will not expand to contain it. Parent elements do not expand to contain elements that are floated or positioned absolutely.

So, you need to add some markup after the Muir Woods paragraph.

<div style="clear: both">&nbsp;</div>

That new div will manifest itself after the picture, and it will pull the parent down around it. You could also put the style in the style sheet, I typically use div.breaker { clear:both; }

Alternatively, you could replace the '&nbsp;' with '<div></div>' Both will achieve the same result. I typically use the nested div as opposed to the nbsp. Semantically speaking, neither are proper; but it works.