wrapper not containing content div

Question

Hi,

I'm trying to get my wrapper to hold my content but it won't. I've taken out the floats and added "overflow: visible" no no avail. I'm thinking it's because of my z-indexing and negative margins, but have tried taking these out and still no change. Any ideas?

http://www.jenniferhope.com/bio

(the float is still in this example.)

Thanks for any help you can offer!

Answer 1

Try this:

#wrapper {
overflow:auto;
}

I took a look at the code on your site. There are a number of things you will probably want to address. It will be difficult to say exactly what you need to do, since I don't know exactly how you want the site to look. But, in general, here are some pointers:

• To contain floated elements, apply overflow:auto; to the parent element, or place something to clear the floats at the bottom of the container, such as: <div style="clear:both;"></div>
• Try to avoid using negative margins for positioning. This is OK in a pinch, but usually there is a better way.
• If you need to have one element layered over another, you will need to position the element using position:absolute; and a z-index. When using position:absolute; the element will be positioned relative to the nearest ancestor that has position:relative; applied. If no element has this applied, it will be positioned relative to the body element.