Can anyone guide me on using CSS to limit the scrollable width of a page when the browser is not maximized? An example can be seen on the landing page of
When the browser is maximized, there is space around the lady in the picture, but as you reduce the browser area, scrolling becomes restricted.
I'm aiming for a similar layout as . However, with my current code, the image gets cut off on the right side when I shrink the browser window and try to scroll right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="ave.css" rel="stylesheet" type="text/css" />
<link href="gh.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#EEEEEE">
<div id="bigpicturecontainer"></div><!--image size is 1600px x
400px and can be downloaded here
http://www.ghanabuildingplans.com/trial.png
-->
<div id="bigmessage">Content for id "bigmessage"
Goes Here</div>
</body>
</html>
Here's my CSS code:
#bigpicturecontainer {
background-color: #000;
background-image: url(images/trial.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
height: 400px;
width: 100%;
}
#bigmessage {
height: 45px;
width: 900px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin-top: 50px;
font-size: 36px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Success! Simply setting the min-width solved the issue.