Help with divs moving when page is resized.

So, the problem is to do with resizing the browser window. I'd like the bottom scroll bar to appear when the page is resized horizontally, but instead my divs are sliding across the page. If it's not completely clear what I'd like to achieve, an example can be seen when you resize this page.

Here is my current CSS:

@charset "utf-8";
/* CSS Document */

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	text-align: center;
}

@font-face {
	font-family: cambria;
	src: url('fonts/cambria.ttc');
}

#wrapper1 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;

}

#wrapper2 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
	
}

#header {
	width: auto;
	height: auto;
}

#header #logo {
	float: left;
}

#header #googleads {
	float: right;
	margin-top: 35px;
}

#line {
	width: 100%;
	height: 4px;
	background-image:url(images/line.gif);
	background-repeat: repeat;
	float: left;
	margin-top: 10px;
}

#wrapper2 #intro {
	font-family: cambria, Arial;
	font-size: 48px;
	color: #ffffff;
	float: left;
	margin-top: 10px;
	text-shadow: 0px -1px 0px #4e4e4e;
}

#wrapper2 #intro span {
	color: #1d91d0;
}

#wrapper2 #rightcol {
	float: right;
	width: 33%;
	height: auto;
	margin-top: 10px;
	text-align: center;
}

#wrapper2 #rightcol span {
	margin: 0 7px 0 7px;
	font-family: cambria, Arial;
	font-size: 16pt;
	color: #202020;
}

#wrapper2 #rightcol .adboxl {
	float: left;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
}

#wrapper2 #rightcol .adboxr {
	float: right;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
}

Code (markup):

I appreciate that my CSS coding is not too great, but I am hoping that my problem can be solved without any major changes to the current structure of my CSS.

 

Use fixed Width to your columns instead %

referring my reply post at http://forums.digitalpoint.com/showthread.php?t=1894328
change #wrapper2 #rightcol and #wrapper2 #leftcol width from % to some px fixed width. May be for left 600px and for right 300px

 

use pixels for width and height instead of %

 

Would this not prevent the website from being properly viewed in a different resolution?

 

As i understand your layout is not of 100%. It's a centered layout with main content is taken may be 70% screen area and rest is background. A lot of designers go for 960px of width for the actual content area and it's okay when you lower the resolution you won't get a scrollbar as long as your users are using more than 800*600 res. I guess now a days a lot users are having res of 1024*728 or more. I know my users are so it's not a problem to fix the width of centered layout.

 

Well it seems to be working well now. If i switch to 1024*768, the website still displays correctly. Even when I make the page smaller but changing the width of the page, the bottom scrollbar appears and the content does not move, excluding the header but that's not a problem. One final question though:

As you can see, I have a #line div which stretches 100% of the screen. It has a background which is a dotted line, and it repeats on the x axis. When i shrink the page enough to get a scroll bar, and move the scroll bar over to the right hand side of the page, this background is not appearing in the area. Here's an example:



Uploaded with ImageShack.us

 

Post a live url may be or copy & paste HTML/CSS code, it would be easy to identify the issue.