Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Browser resizing moving Divs

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    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

  • Users who have thanked tracknut for this post:

    BenR (01-19-2013)

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well now I feel silly. I completely neglected that little guy.

    You were right, Dave! Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •