3

I have a div whose width and height are some fixed percentages of the browser-window, say 70% and 80%, with certain min-width and min-height. I want this div to be displayed both vertically as well as horizontally centered in the browser window. As the browser window is resized, I want the div to automatically resize and also keep itself in the center.

Firstly, it is not a div of fixed width or height, so I cannot use absolute positioning with negative margins. I have used the usual position: static and set left and right margins to auto for the horizontal centering. This ensures automatic resizing and centering with browser window resize only in the horizontal direction. This kind of thing doesn't work for vertical centering. And I can't use negative margins for that as the position is not absolute (I need it to be static for the horizontal).

I saw here and here on StackOverflow that there could be a solution for variable-size divs by using display:table-cell. Is there preferably any other solution, maybe slightly simpler, using only some setting of position, margin etc.?

Here's the demo site where I want to apply this layout.

Thanks a lot in advance!

Community
  • 1
  • 1
Abhranil Das
  • 5,702
  • 6
  • 35
  • 42
  • It works as you want it in Safari if I understood correctly. – jQuerybeast Nov 29 '11 at 12:31
  • It is horizontally centered alright, but if you resize the Safari Window vertically, you will see that the div is not moving to stay in the center. – Abhranil Das Nov 29 '11 at 12:36
  • Then you might consider having a look at this: http://jsfiddle.net/C958g/ but I wouldn't suggest it. Is there any particular reason your not assigning it with position absolute? You can achieve the exact same things and more by changing few things in your CSS – jQuerybeast Nov 29 '11 at 12:42
  • With `position: absolute` and negative margins, I would need to know the height and width of my div, but those are not fixed here. I am pretty new at this, so if there's something I am missing here and you think it will work even for a variable-size div, please let me know. And thanks for the link; I'll take a look. – Abhranil Das Nov 29 '11 at 12:47
  • I didn't say use negative margins. All you need to do is have the entire page positioned in the centre on window resize, and the gallery to resize accordingly? Well then you can use the good old method of setting everything up in a position:relative and margin:0 auto. – jQuerybeast Nov 29 '11 at 12:56
  • Okay, sorry; I must have misinterpreted. I'll look into that, thanks! – Abhranil Das Nov 29 '11 at 20:05

1 Answers1

1

You could also try something really simple like:

<head>
<style type="text/css">
body, html {
    height:100%;
    margin:0;
}
#div1 {
    height:10%;
}
#div2 {
    background:#F00;
    height:80%;
    margin:0px auto;
    width:80%;
}
#div3 {
    height:10%;
}
</style>
</head>

<body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
</body>
</html>

Of course this technique needs to extra divs, which makes it not-so-very-sexy - but i'm quite sure it's pretty cross-browser safe...

ptriek
  • 9,040
  • 5
  • 31
  • 29