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.
Position a page dead centre(screen resolution independent)
Moderator: General Moderators
Re: Position a page dead centre(screen resolution independent)
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)
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)
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
Any suggestions?
Thanks once again
Re: Position a page dead centre(screen resolution independent)
Add this another line to div#container:
bookmark this page http://www.w3schools.com/css/css_reference.asp; it's your new best friend!
Code: Select all
div#container {
width: 50%;
min-width: 768px;
margin: 0 auto;
background-color: #CCCCCC;
border: 1px solid #000000
}
Re: Position a page dead centre(screen resolution independent)
Thanks alot Mark.
It works perfect!
It works perfect!