Hi, Im making a website that i want to have all the info contained in a DIV box, that is 100% of the screen width, but only about 70% of screen height to make it look widescreen.
(The 70% screen height will be a static figure like 500px, as the box height cannont change. In smaller resolutions though, like 800X600, it is ok if the main DIV takes up the whole screen).
How do I get my main content DIV to centre vertically with equal portions below and above the DIV?
Here is my CSS code:
#mainsection {
position: absolute;
width: 100%;
height: 400px;
top: 15%;
background-color: #605D5C;
border: 1px dashed white;
overflow: hidden;Like this?
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htm">http://www.infinitypages.com/research/v ... reddiv.htm</a><!-- m -->
(Pyro's example.)yep thats the one. Cheers, it worked a treat!
(The 70% screen height will be a static figure like 500px, as the box height cannont change. In smaller resolutions though, like 800X600, it is ok if the main DIV takes up the whole screen).
How do I get my main content DIV to centre vertically with equal portions below and above the DIV?
Here is my CSS code:
#mainsection {
position: absolute;
width: 100%;
height: 400px;
top: 15%;
background-color: #605D5C;
border: 1px dashed white;
overflow: hidden;Like this?
<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htm">http://www.infinitypages.com/research/v ... reddiv.htm</a><!-- m -->
(Pyro's example.)yep thats the one. Cheers, it worked a treat!