Page 1 of 1

Resizing window without horisontal scroller...

Posted: Fri Apr 02, 2010 4:09 pm
by Marbled-D
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]

Re: Resizing window without horisontal scroller...

Posted: Thu Apr 15, 2010 2:34 pm
by Hendeca
I'm not totally clear on how you are adding the border images. Are these being added in the form of a background image, or are you using img tags? Also, are the border images in the 760px wide div, or are they in a div that surrounds the 760px div? If you specify this, it will be a lot easier to solve the problem. If you are putting the images within the 760px wide div, I'd suggest making a containing div that is 800px wide and 520px high that contains the border image as a div backgorund image. This shouldn't cause your 760px width div to scroll.

Re: Resizing window without horisontal scroller...

Posted: Tue Apr 20, 2010 1:13 pm
by Marbled-D
Hey! Thanks for trying to help me out!

The thing is that I don't really in which order to put the divs, to make this work...
I've made a little test-site here ( http://www.morat.se/testing/ ), so you maybe could understand better of what I am looking for. I don't really know how to explain it in english...

Please, visit it and have a look at the code. And try to resize the window! Then you might get what I'm looking for...

//Marbled-D

Re: Resizing window without horisontal scroller...

Posted: Tue Apr 20, 2010 1:27 pm
by kaszu
Easiest solution (in my opinion) would be to create 790px wide image with both borders in image and

Code: Select all

html, body {
    min-height: 100%;
}
body {
    background: url(mybackground.gif) center top repeat-y;
}