Why the wrapper grow?

Anishgiri · 01-30-2013, 12:17 AM

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.

Excavator · 01-30-2013, 12:42 AM

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?

Anishgiri · 01-31-2013, 01:17 AM

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.