Resizing window without horisontal scroller...
Posted: Fri Apr 02, 2010 4:09 pm
Hey!
I want to make a box in the center of my website. It should be, let's say 760px wide, so that it fits the most users. But I want to have images outside this box as well. Lets say I want a "border" made by pictures around my box, that is 20px on each side. When I do this my horisontal scroller comes up when I reach 800px width, not 760; I want my "20px-borders" to disappear first, then should the horisontal scroller come up. How can I change this without using tables...????
Example:
[text]
<html>
<head>
<style>
. body {margin: 0px; padding 0px; background-color: red; text-align: center;}
#first {margin: 0 auto; width: 800px; min-height: 500px;}
#left {float: left; background: url(van.jpg) repeat-y top right; height: 100%; width: 20px;}
#center {float: left; min-height: 300px; width: 760px; background: yellow;}
#right {float: left; background: url(van.jpg) repeat-y top left; height: 100%; width: 20px;}
</style>
</head>
<body>
<div id="first">
<div id="left"></div>
<div id="center">Center of tha page. Around this yellow box should I have two 20px wide pics...</div>
<div id="right"></div>
</div>
</body>
</html>
[/text]
I want to make a box in the center of my website. It should be, let's say 760px wide, so that it fits the most users. But I want to have images outside this box as well. Lets say I want a "border" made by pictures around my box, that is 20px on each side. When I do this my horisontal scroller comes up when I reach 800px width, not 760; I want my "20px-borders" to disappear first, then should the horisontal scroller come up. How can I change this without using tables...????
Example:
[text]
<html>
<head>
<style>
. body {margin: 0px; padding 0px; background-color: red; text-align: center;}
#first {margin: 0 auto; width: 800px; min-height: 500px;}
#left {float: left; background: url(van.jpg) repeat-y top right; height: 100%; width: 20px;}
#center {float: left; min-height: 300px; width: 760px; background: yellow;}
#right {float: left; background: url(van.jpg) repeat-y top left; height: 100%; width: 20px;}
</style>
</head>
<body>
<div id="first">
<div id="left"></div>
<div id="center">Center of tha page. Around this yellow box should I have two 20px wide pics...</div>
<div id="right"></div>
</div>
</body>
</html>
[/text]