Page 1 of 1

Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 3:35 am
by lynchpin
Hello,
I have had this problem with a site am building, I have all the pages inside a container <div> just after the body tag. In the CSS I specified a minimum width for the container, so all pages would look the same and when the browser window is resized(reduced) the page wont shrink with it.

But it appears some screen resolutions like 800 x 600 or large desktop monitors with 24" screens make the page appear either pushed to the right side or stretched respectively. Below is an example of the css i used for the pages.

CSS
----------------------------------------------------
body {

background-color: #FFFFFF;
margin-right: 10%;
margin-left: 10%;
position: static;
width:auto;

}
#container {
background-color: #FFFF99;
border: thin solid #FF9933;
min-width: 996px;

}
---------------------------------------------------------

Thanks.

Re: Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 7:50 am
by Chalks
Your problem is probably with min-width. Internet Explorer doesn't properly handle it, so you'll either need to work up a different solution, or use a hack: Min-Width in IE

Re: Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 8:05 am
by marcth

Code: Select all

 
<html>
<head>
  <style type="text/css">
    div#wrapper{
      text-align: center;
      margin: 0 auto; 
      width: 100%;
    }
 
    div#container {
      width: 50%;
      margin: 0 auto; 
      background-color: #CCCCCC;
      border: 1px solid #000000
    }
  </style>
</head>
 
<body>
  <div id="wrapper">
    <div id="container">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</body>
</html>
 

Re: Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 8:19 am
by lynchpin
Thanks for the html code and Css Mark, it works fine except if I use it, when the browser window gets resized to a smaller width my page gets all crushed up. I want the page to shrink to a certain width, and then remain at that width even if the browser window reduced further.

Any suggestions?

Thanks once again

Re: Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 8:24 am
by marcth
Add this another line to div#container:

Code: Select all

 
    div#container {
      width: 50%;
      min-width: 768px;
      margin: 0 auto; 
      background-color: #CCCCCC;
      border: 1px solid #000000
    }
 
bookmark this page http://www.w3schools.com/css/css_reference.asp; it's your new best friend!

Re: Position a page dead centre(screen resolution independent)

Posted: Wed Aug 27, 2008 8:54 am
by lynchpin
Thanks alot Mark.
It works perfect! :)