5

Before someone down votes me for asking yet another centering problem. Please read my situation before judging!

I'm familiar with most common techniques for centering stuff but here is my situation. I have a DIV that must be both vertically and horizontally centered within its parent but it must also be fluid and not exceed the width of 890px.

Max-width achieves the fluid-ness that I want but because absolute positioned elements need width rather than max-width my vertical/horizontal centering breaks. At the moment i'm having to sacrifice fluid-ness over centering (or vice-versa) but I NEED both.

I'd like to keep the content within my centered DIV in view at all times, my current code doesn't do this, it hides the content as the window is made smaller http://jsfiddle.net/cCQ2w/

Can anyone propose a solution that might work for me?

Slugart
  • 4,535
  • 24
  • 32
egr103
  • 3,858
  • 15
  • 68
  • 119

2 Answers2

2

I've tried to solve your problem. See this page: http://jsfiddle.net/PGce2/. So it centered horizontally and vertically and it is "fluid" and not exceed the width of 890px.

khomyakoshka
  • 1,259
  • 8
  • 18
  • Thanks for this different approach but it is exceeding 890px, try adding more paragraph text and make the browser window larger. Any other ideas? – egr103 Sep 12 '12 at 13:43
  • @egr103, I just forgot to remove "width:100%;" from .break css. I've corrected it here: [http://jsfiddle.net/afNyC/](http://jsfiddle.net/afNyC/). I tested it in Firefox, Chrome and IE 9 – khomyakoshka Sep 12 '12 at 14:33
  • Brilliant! Thanks! Basically my original code had a 100% width div behind the main bit of the content so that a bg image could fill the full width of the browser window. Would you suggest adding another wrapper around .break to get this affect? – egr103 Sep 12 '12 at 14:48
  • @egr103, Do you mean this? [http://jsfiddle.net/nSc9n/](http://jsfiddle.net/nSc9n/) – khomyakoshka Sep 12 '12 at 15:12
  • I do mean that. Thanks for all your help :) – egr103 Sep 12 '12 at 16:15
2

You can provide a width of 100% with max-width set to 890px.

I have shown [here][1] the sample of a div with both horizontally and vertically align center.

[1]: http://jsfiddle.net/r2qL5sgj/1/
devender balodi
  • 31
  • 5
  • Using width:100% worked in conjunction with storing the calculated width and then later setting the width to initial in order to bypass the flow calculation. – Travis J Aug 10 '15 at 22:02