1

I'm trying to tweak my site and have been sitting for a bit too long at the computer hence I do not know where my mistake is. Hoping someone could help out a person with basic knowledge of css.

Here is my css:

#body {float: left; width: 100%; min-height:100%;}

#header-wrap, 
#slider-wrap, 
#content-wrap, 
#footer-wrap {
       float: left;
       clear: both;
       width: 100%;
       }

#header-wrap  {
       float: left;
       width: 100%;
       }



#header {height: 100px;}
#slider {height: 500px;}  
#content {padding: 0; text-align: left;}

I wanted to add 

position: absolute; top: 0px

to #slider-wrap so that it begins at the top right under the header but when I do that both the #content moves up and is placed directly under the slider?

What is the correct positioning for these objects so that they show in the following order: 1. header 2. slider (partially under the header) 3. content

and on pages with no slider the content should follow the header???

any clues for this noob would be much appreciated

bikeechick
  • 65
  • 1
  • 7

1 Answers1

0

This:

#header-wrap, 
#slider-wrap, 
#content-wrap, 
#footer-wrap {
   float: left;
   clear: both;
   width: 100%;
   }

Means that all three rules are applied to all the four specified elements. If you add your position rule there as well it'll apply to all those elements.

Instead, try adding:

#slider-wrap { position: absolute; top: 0px }

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126