Resizing window without horisontal scroller...

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Marbled-D
Forum Newbie
Posts: 8
Joined: Sat Jan 23, 2010 5:39 pm

Resizing window without horisontal scroller...

Post 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]
Hendeca
Forum Commoner
Posts: 29
Joined: Tue Nov 18, 2008 1:27 pm

Re: Resizing window without horisontal scroller...

Post 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.
Marbled-D
Forum Newbie
Posts: 8
Joined: Sat Jan 23, 2010 5:39 pm

Re: Resizing window without horisontal scroller...

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Resizing window without horisontal scroller...

Post 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;
}
Post Reply