Browser resizing moving Divs

BenR · 01-19-2013, 07:07 PM

Hello everyone and thanks for taking the time to read.

I am trying to create a fairly basic page with a main content box on the left and a small side bar on the right. The header has an image popping out on the right overlapping and overflowing from the header so as not to expand it. (That part is working so far).

When I bring the code to a browser to test and resize the browser, all of the containers get shot all over the place rather than enabling scroll for the browser.

Code:

body{
	background: #9FD066;
	
}
	
#superwrapper
	
#wrapper {
	width: 1000px;
	height: 2000px;
	overflow: scroll;
	position: fixed;
	margin: auto;
}

#img {
	float: right;
	margin: 10px;
	background: white;
	width: 314px;
	height: 184px;
	z-index: 50;

}

#header {
	height: 150px;
	background: #FFE680;
}

#content {
	height: 100%;
	width: 700px;
	float: left;
	background: #FFE610;
	margin-top: 10px;
}

#sideleft {
	width: 290px;
	margin-top: 10px;
	float: right;
	background: #EE1600;
}



#footer {
	width: 1000px;
	margin: -75px auto 0;
	height: 75px;
	background: #BFF08E;
	position: relative;
}

Markup

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Home</title>
	<link rel="stylesheet" type="text/css" href="primary.css">

</head>
<body>

<div id="wrapper">	

	<div id="img"><img src="images/logo.png"></div>
	
	<div id="header">Header text test</div>
	
	<div id="content">Content text test</div>
	
	<div id="sideleft">side text test</div>
	
</div>

Ignore the awful colors

I'm just using contrasting colors to see where the frames are.

I'd appreciate any help! Thank you.

tracknut · 01-19-2013, 07:26 PM

I'm going to guess that if you removed the "#superwrapper" from this:

Code:

#superwrapper
	
#wrapper {
	width: 1000px;
	height: 2000px;
	overflow: scroll;
	position: fixed;
	margin: auto;
}

it would make a big difference. Your #wrapper would then have a fixed width, and shouldn't change with the size of the browser.

Dave

BenR · 01-19-2013, 07:49 PM

Well now I feel silly. I completely neglected that little guy.

You were right, Dave! Thank you!