Lay out question

**anishgiri** · 01-29-2013, 12:46 AM

Code:

<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 when I put height:120px; in comment2 div?

**anishgiri** · 01-29-2013, 06:47 PM

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.

Thread: Lay out question

Thread Tools

Display

Lay out question

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions