Question

Possible duplicate: why does the css min-width attribute not force a div to hae the specified minimum width?

My Website: http://tg.unifiedtech.org/

I’m working on a layout that’s quite complex (for me at least) to style. However, I styled the main content area for this website with large-content, not WordPress’ default ‘Hello World’ post which is quite tiny.

The style looks alright when you see content that is quite long, but when the content is only one sentence, the #CWrapper squishes down to something undesirable. I don’t get why. :/

Affected page/post: http://tg.unifiedtech.org/2011/12/17/hello-world/

---

Question: Why doesn’t the browser (Chrome/FF atm) use the margin I define to define the width of #CWrapper?

---

Things I’ve tried:

1. position:absolute; on #CWrapper (as per this question) — When used with min-width, the box shrunk even smaller.
2. float:left; on #CWrapper (as per this question)
3. Applied min-width property with both static pixels (based on 1024×768 resolution) and variable-length/percentages

---

Thanks in advance!

Answer 1

Just remove position:absolute from #Wrapper – if you add absolute positioning to an element, it looses its width:auto (= default value for a div, meaning 100% of its parent). Since #Wrapper has lost its width, child elements can’t inherit it.