div height is not recognised..

[Koani]

I've been working on making a css page without tables. It's my first time. :) But darned if I can figure out how to make this particular situation work.

I've tried clearing in the footer section and (if memory serves), it put extra white space down there. I've tried putting a height on the main body section (which is fine but if the left navigation text is more than that height, it looks like what I already have).

The pullquote code:
.pullquote {
width: 130px;
float: right;
background-color: #D4BFA9;
margin-top: 0px;
color: black;
margin-left: 15px;
margin-bottom: 20px;
font-weight: normal;
font-style: italic;
font-size: smaller;
}

The footer:
#footer {
background-color: #324C67;
color: white;
position: relative;
padding: 5px 20px 0px 20px;
height: 45px;
font-size: smaller;
}

The stylesheet: <snip>

The behavior:
<snip>

Thank you for any insight.

[edited by: DrDoc at 3:44 pm (utc) on June 10, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]

[SuzyUK]

Hey Koani - Welcome to WebmasterWorld

Not sure that there is enough information in this question, but based on the code you have above clearing in the footer should work fine.

The reason there may be a gap is the 20px bottom margin on the pullquote div?

Is it possible there is any absolute positioning involved anywhere in the rest of the layout?

Add some more info and I'm sure someone will have more information :)

Ta
Suzy

[Koani]

It's not really a gap. It's an overlap. My theory is that it doesn't see how big the image is (and text after the image since it has a caption), so just goes off the information it does have. This information on height is usually text found in the left navigation and main body content.

As a temporary fix, I have put a div height around the whole thing. That works. And if get more text than image, I just take the height off. 99% of the time, we should have more text than image.

Thanks for glancing at the code.