1

This is my example on jsfiddle http://jsfiddle.net/YG6tx/5/

so my question is, why is the red div(pageWrap) not taking the height of it's inner elements?

If I specify a float:left, it takes the height, but the margin: 0 auto no longer holds.

how can I acheive both? (margin:0 auto + the div needs to take the height ).

Do I need to specify the height explicitly?

I'm a newbie, so this question might seem simple.

asdasdasdasdqwe
  • 321
  • 1
  • 8
  • 20
  • What are you trying to achieve exactly? It's not clear from your question. Also, the images in the fiddle aren't showing: would it be easier to see what you're expecting if they were? – djd Mar 12 '12 at 06:02
  • I want the `red div` to be centered and it should take the height of it's inner elements. I don't want to explicitly specify the `height` property in css. It is something I'm trying by myself – asdasdasdasdqwe Mar 12 '12 at 06:07
  • possible duplicate of [Why is my div's height zero](http://stackoverflow.com/questions/5369954/why-is-my-divs-height-zero) – Quentin Mar 12 '12 at 06:44
  • @akriy check my updated fiddle and let me know if any changes or help needed. – w3uiguru Mar 12 '12 at 07:05

3 Answers3

0

Just give overflow:hidden to #pagewrap.

Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
Naveen Bhaskar
  • 81
  • 1
0

Designing with floats and absolutely positioned element is hard... Their parent elements won't wraparound them so often you'd have to specify the height attribute on the parent to accomplish the look you want. However, the .topLeft wouldn't exactly need to have the float:left; property. If you remove that I think you'll get the desired look. Example: http://jsfiddle.net/YG6tx/8/

henryaaron
  • 6,042
  • 20
  • 61
  • 80
-1

Try this updated fiddle: http://jsfiddle.net/YG6tx/12/

As in you original fiddle there were no images due to incorrect path of images so in my fiddle also no images but as per your requirement i have changes the layout.

As per your requirement images are at position, red div taking entire height as per elements inside and center also margin:0 auto;

If i am lagging some where please comment so i can change as per requirement.

w3uiguru
  • 5,864
  • 2
  • 21
  • 25