Hey, i know the title of this post is whack but bear with me.
So i have a <body> styled in the center of my page (around 700 px wide) with a plain white background (grey for demonstration). I positioned it as relative so that I can position its two children (a main-col and a sidebar) with absolute positioning relative to it. Like this :arrow:
Unfortunatly, since there is nothing in the body and the sidebar and main-col are taken out of the flow of things, the body gets bumped up, so i get this instead.
Now, i know I can use floats to achieve the same thing and then just clear 'em to bump the body down, but heres the thing. I wanted to add ANOTHER sidebar (sidebarB) to the sidebar (using absolute pos. to hang it to the right). Like this :arrow:
1. forget about your <body> tag as a wrapper - style your body and html tags to 100% height add any BG images/colours to either body or html. Set the min-width of your body to 700px or however wide your site is and forget.
2. make a wrapping div, give it a height of auto a width of 700px and the old margin:0 auto; centre hack. Then give it a position of relative.
3. pop your boxes in and float left, use a clear float then add your next sidebar block and position it absolute. It will pick up the relative position from the wrapper and you will beable to style it accordingly.
So i have a <body> styled in the center of my page (around 700 px wide) with a plain white background (grey for demonstration). I positioned it as relative so that I can position its two children (a main-col and a sidebar) with absolute positioning relative to it. Like this :arrow:
http://img408.imageshack.us/img408/146/wantei7.th.jpg
Unfortunatly, since there is nothing in the body and the sidebar and main-col are taken out of the flow of things, the body gets bumped up, so i get this instead.
http://img266.imageshack.us/img266/3885/getkj5.th.jpg
Now, i know I can use floats to achieve the same thing and then just clear 'em to bump the body down, but heres the thing. I wanted to add ANOTHER sidebar (sidebarB) to the sidebar (using absolute pos. to hang it to the right). Like this :arrow:
http://img134.imageshack.us/img134/5039/sidebar2iv0.th.jpg
What would be the best, most valid way to position the second sidebar? Do i position it relative to the body or to the original sidebar?
Sorry about the noob-ness of this question. Take care :)
Right - what I would do is...
1. forget about your <body> tag as a wrapper - style your body and html tags to 100% height add any BG images/colours to either body or html. Set the min-width of your body to 700px or however wide your site is and forget.
2. make a wrapping div, give it a height of auto a width of 700px and the old margin:0 auto; centre hack. Then give it a position of relative.
3. pop your boxes in and float left, use a clear float then add your next sidebar block and position it absolute. It will pick up the relative position from the wrapper and you will beable to style it accordingly.
4. sorted.
Anyone else have any better more simple ideas?