CODEWITHSUNDEEP
htmlcss960.gs
LearningRoR
LearningRoR

Reputation: 27192

How can I make a color background that expands out of the 960 grid system?

Similar to stackoverflows header, I am trying to make my header background color expand and take over both sides of the page while still keeping the text in the center but I'm not sure of the correct technique on how to do this using the 960grid system. This is my html:

<body> 
  <div class="container_24">
     <div id="header-top-border" class="grid_24"></div> # take over top of page.
     <div id="header-background" class="grid_24"></div> # take over top of page.
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </div>
</div>

I would like have the Logo be on top of the header-background and judging by the css on this site I'm not sure if it should be inside of the header-background div or not. How is this done?

Thank you.

Upvotes: 0

Views: 1177

Answers (2)

Ryan Atallah
Ryan Atallah

Reputation: 2987

You want to put the header-background outside of the container_24 div, because the latter acts as a wrapper restricting the width of the usable page. If you want the logo to go on top of the header-background, you can put it inside header-background, or you can put it outside and shift it on top using negative margins, absolute positioning and z-index. Probably best to just put it inside header-background.

Your code might look like this:

<body>
  <div id="header-background" class="banner">
    <div class="container_24"> # You may want this to help position things inside the banner
      <div id="logo" class="grid_5"><h1>Logo</h1></div>
    </div>
  </div> # uses entire width of the window
  <div class="container_24"> # only 24 columns wide
    # everything else...
  </div>
</body>

Upvotes: 2

swatkins
swatkins

Reputation: 13630

Pull it out of the container, then create another container for the header:

<body> 
  <div id="header-background">
     <div id="header-top-border" class="container_24"></div>
  </div> # takes up the whole width
  <div class="container_24">
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </div>
</div>

Upvotes: 1

Related Questions