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
    Regular Coder
    Join Date
    May 2010
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why the wrapper grow?

    Code:
    ode:
    <style type="text/css">
    body 
    {
    	margin: 0;
    	padding: 0;
    	background-color:#552F18;
    }
    #wrapper 
    {
    	width:960px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color:GREEN;
    }
    
    #header
    {
      position:relative;
      width:940px;
      height:110px;
    }
    
    #header #logo{
    	position:absolute;
    	left:24px;
    	top:24px;
    	z-index:2;
    }
    
    #comment2
     {
       background-color:#CA1E1E;
       height:120px;
       width:615px;
       padding-left:15px;
       padding-top:20px;
       position:relative;
     }
    #about_us
    {
       background-color:#E2E7EB;
       height:220px;
       width:615px;
       position:relative;
       padding-left:15px;
       padding-top:15px;
       font-size:15px;
       padding-bottom:15px;
       margin-top:5px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">  
       <div id="header">
    	<H1> THIS IS THE HEADER </H1>
       </div>
     <div id="main_left">
       <img src="image/secondary_slider2.jpg" alt="6 Years!" >
    
            <div id="about_us">
    		 this is just a test
    		  this is just a test	
            </div>
       
           <div id="comment2"  >
              this is just a test
    	   this is just a test
           </div>
      </div>
    </div>
    </body>
    This is just a test(short code). So I made my header div as relative position, so I can position the content in header with absolute positioning. Is this a correct approach?Now I add an image in the main_left div which is secondary_slider2.jpg, why the wrapper grow?Even thought I declared a fixed width in the wrapper? I want it to stay as width:960px;

    Also why the wrapper expand and shows a scroll when I put height:120px; in comment2 div? Thanks

    Here is the live run

    http://anishgiri.net46.net/test.html

    I realize that when the page got longer of course it will show a scroll, and the wrapper does not really grow, the scroll just occupy space on the left that is why it looks like the wrapper grows. How silly I am.
    Last edited by Anishgiri; 01-30-2013 at 12:57 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Anishgiri,
    To your first question about making that parent relative so it's contents can be positioned absolutely, you are doing that right.
    Have a look at a tutorial about positioning that might explain it further.

    As for #wrapper expanding in width or showing a scrollbar, I couldn't get either of those things to happen with the code you've posted here.

    I did copy/past your code into a new .html document with a DocType, maybe you are not using one?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2010
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a doctype. I think the wrapper did not grow.When I put an image it increase the height so it's natural for a scroll to show, I am just silly I did not realize it.


  •  

    Posting Permissions

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