Browser resizing moving Divs [Archive]

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.

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

<!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 :p 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:

#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