Css Style and my lessons

I was playing around with layout, divs and css style properties.
Now it's always difficult to summarize all the experience but i'll try my best
This is what i learned...
1. Css wrapper div should be used to center the whole web site.
Now we should specify some width units and we browser size reduce beyond that value , then horizontal scroll bar will appear.
Also margin for this wrapper should be set to auto so that it'll be centered...
This code piece is used to center the website....

html,body {
height:100%;
margin:0;
padding:0;
text-align: center;
background-color: #999999;
}

#CenterLayout {
width: 1000px; /* set to desired width in px or percent */
height: 100%; /* This made me go nuts because i did not specify this height , Absolute value required here if vertical scrollbar is required below certain value*/
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}

2. Margin auto sets are outer padding values... In case of auto, it tries to place div at equal distance from left and right side div...

3. Float: left to make things left justified... i know this is not perfect... but i'll updated it as i learn more...

4. To put an image in the div and over lap text on it... i wrote this style

#CenterLayout #TitleSection {
position: relative;
top:0%;
left:30px;
width:50%;
height:25%;
// border:5px double #999;
margin:0 auto;
}

#CenterLayout #TitleSection #Title-background {
width:100%;
height:100%;
}

#CenterLayout #TitleSection #TitleContent{
position: absolute;
//margin: 15px 15px 15px 15px; /* No Idea about significance of this */
// border:3px double #777;
padding-bottom: 5px;
bottom: 0px;
left: 0.5em;
width: 90%;
height: 50%;
font-weight: bold;
color: #777;
//font-size: X-large;
font-size: 150%;
overflow: hidden;
text-align: center;
letter-spacing: 8px;
}

Now important point here is positioning attribute.
Position: absolute, place the div at absolute position relative to parent container.. so for this, we need to make sure parent container's width and height property. Also when we specify, absolute position then top, right, left, bottom... some of these properties should be specified properly.

If position is relative then top and left values are relative to self absolute position.


One very important thing to learn about vertical image resizing is:
1. in case of horizontal, screen appear in center and margins are left on both side, this looks ok because things are symmetric and space is filled. Note: here we set height as 100%

2. Now if we re-size the browser vertically then things can go messy, for example: text overflow can occur. To avoid this, we should specify the height dimension also to some value..
suppose u have an image and u position some text on top of it...
by horizontal width property of parent div, scroll-bar will appear and things will not go wrong.
This boils down to two things:
1. If we specify height dimension to some value then on very large browser window, we might see some blank space below the website ...
2. If we do not specify height dimension to 100% value, we need to find some way so that when image is resized while browser resizing then font that is overlapped on the image should also be resized...

Will write later...
SJ