having trouble with sub classes

[misterx]

Trying to put together a little page to show off my PHP work and my CSS is giving me trouble...


First of all, here is the page and it's style sheet:

http://www.maniacalmonkey.com/resume

http://www.maniacalmonkey.com/resume/style.css

(the style sheet looks like crap because I've been playing with it so much but it does validate)


The problem I seem to be having is that the <divs> that I put within the <div class="block"> aren't displaying as inside that div in Netscape 7...looks fine in IE for whatever reason.

If you look at the page in Netscape you'll see what I mean. There is an empty rectangle with images and text that fall in below it. However if you view the page in IE you see the images and text within that rectangle, which is what I was going for.

I'll be the first one to admit that I don't fully understand CSS positioning yet. And for the life of me I can't figure out what rule I'm breaking or what property I'm leaving out that is causing this behavior. Does anyone have any ideas? Thanks.

[freak]

You just have to clear your floats.

// freak

[misterx]

Interesting. Though I don't understand what the clear class described in the link actually does for me or where I should implement it. Care to clarify? Thanks.

[mindlessLemming]

Not quite, more simple than that, in fact.
change

#content .block .rightBlock {
        float:             left;
        text-align:     left;
	position:	relative;
}

to

#content .block .rightBlock {
	text-align:	left;
	position:	relative;
}

....and that fixes your problem.

[misterx]

Indeed, taking the float out of that class did make the text go into the box I wanted it to be in. However the images (the stuff in the leftBlock class) still defy the boundaries of the outer rectangle.

Taking the float out of the leftBlock class makes it stay within the outer rectangle as well but then nothing is positioned the way I want it to be.

You can see what I mean if you look at the page again. I'm going to tinker around a bit but feel free to throw in any other suggestions.

[mindlessLemming]

OK, this is a bit of a nasty hack, but if you put some kind of invisible element (maybe a div with visibility:hidden in css?) at the bottom of each bit of text, and gave it a a value of clear:left, or clear:both I'd imagine you might have a bit more luck.
This is not a real good solution, but no other is jumping into my head.

[freak]

Originally posted by mindlessLemming
OK, this is a bit of a nasty hack, but if you put some kind of invisible element (maybe a div with visibility:hidden in css?) at the bottom of each bit of text, and gave it a a value of clear:left, or clear:both I'd imagine you might have a bit more luck.

That's exactly what clearing your floats is...

// freak

[misterx]

I get it now...I mean kinda.

I'm not sure why it works but I figured out where to put it and it seems to have made the problem go away.

Thanks.