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.