OK. I'm feeling dumb....

[DaveMaxwell]

I'm working on a site for some friends of mine and I thought it would be a great time for me to expand my css skills. I was having a great time working on it until I started to work on this page:

http://www.keystonecapitalchorus.org...fect/photo.htm

See how the photos aren't staying within the content div? Any ideas of what I'm doing (something stupid I'm sure)

This is the way I basically would like the page to come out (after some style is added of course). I could do it with the tables, but this is a learning experience so I'd prefer to do it with css if at all possible.

http://www.keystonecapitalchorus.org...ect/photo2.htm

[BenANFA]

Without examining the code too much is it something about having floated images inside a containing div so that the divs height is not adjusted for the images ?

add a

<br style="clear: both" />

after them ?

[DaveMaxwell]

That will work. Is there any other way I could have coded that so it wouldn't require that extra break?

[BenANFA]

Probably but not without making the design less fluid (i.e. specify more widths and heights) and I suspect that it is the simplist solution (and therefore the best)

[vgarcia]

That will work. Is there any other way I could have coded that so it wouldn't require that extra break?

Not really. Look at the example of styling forms at http://alistapart.com/stories/practicalcss/, which discusses the same problem with floats. When you float an element, you end up removing it from its normal place in your document, so the containing element tries to adjust accordingly. That <br /> (or alternately, a <div> styled with "clear: both;") knocks some sense back into the parent element .

Off Topic:


Also Dave, if you want the navbar links to go right next to each other without any extra space, remove the line breaks and tabs between your </li> and <li> tags

[DaveMaxwell]

OK. I'll stick with it the way it is and just have the clear both after it. Thanks for the help.

Off Topic:

Thanks. I didn't take too much notice to the extra spaces, but I'll fix that