cssskeleton-css-boilerplate

Skeleton CSS - how to span the width of the screen?


I'm looking at www.getskeleton.com. My header and footer are supposed to span 100%. Can I do this without "breaking" the framework? Or am I supposed to restrict my layout to 960px?


Solution

  • You probably don't want fixed elements, but it is one way of making elements full width without changing the behaviour of it's parents.

    Note: similarly to absolute positioning, the elements would be taken out of the flow, and the top of the bottom would need to be changed accordingly. Padding to accommodate the height of each element should do it.

    header,
    footer{
      position: fixed;
      width: 100%;
    }
    
    header{
      top: 0;
      left: 0;
    }
    
    footer{
      bottom: 0;
      left: 0;
    }