0

I have a simple page, a container div and a title div. The title div is contained in the container (yes I know it's not the best choice in naming but it's not the point here).

The two div have a fixed height (with min height). My target is obtain a vertically centerd page in the browser window. When the browser window is greater than container div height I want the container div vertically centerd in the page. When the browser window is smaller then container div height I want the container div at the top of the page showing its contained div title.

The code I have here works fine with Firefox but has a problem with Safari : when the browser window has an height smaller than content height the title div becomes not visible.

Please, do you have an idea what may be the solution to this problem ? The fiddle is : http://fiddle.jshell.net/D4xWr/

Code;

<body>
<div id="container">
    <div id="header_title">
        TITLE
    </div>
</div>

css

 * {
padding:0; 
margin:0;}

html,body {
height:100%;
}

body {
font-family:Verdana, Geneva, sans-serif;
font-size:62.5%;
color:#734d08;
line-height:16px;
background-color:#00ffcc;
}


#container{
margin: auto;
position: absolute;
height:80%;
min-height:520px;
width:970px;
min-width:970px;
top: 0; left: 0; bottom: 0; right: 0;
background-color:#00ffcc;
border:1px solid red;
    }

#header_title{
background-color:white;
height:70px;
min-height:70px;
width:100%;
border:1px solid;
}
mr.soroush
  • 1,110
  • 2
  • 14
  • 31
Artemide Innominato
  • 312
  • 3
  • 15

1 Answers1

0

The problem is that the vertically centering trick works too well in Safari (and Chrome and IE). One solution is to add a media query to the CSS for that prevents this trick on smaller screens.

@media screen and (max-height:520px) {
    #container {bottom:auto}
}

See updated fiddle.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Although some minutes ago inspired from the answer given here http://stackoverflow.com/questions/10925852/vertically-horizontally-align-inner-div-center-of-the-page?rq=1 I have apparently solved the problem changing position:absolute in relative, I 've checked your solution and its ok also. I don't know which one is better but for me it's ok. Thank you. – Artemide Innominato Oct 14 '13 at 09:56
  • In this specific case I'd say the better solution is the one that does not have the height 520px in two places. Because when you'd change this height in one place, you'd have to remember to also change it in the other. – Mr Lister Oct 14 '13 at 10:02