Creating a three row layout.

Question

Hi everyone,

I'm currently in the process of creating a three row layout, nothing too difficult so far. The problem arises because I need each row to be 100% width to fill any resolution with a color and I also need the divs inside each row to be 1024/960px and centered.

Something along these lines:

<div class="top"> <!--This needs to be 100%-->
    <div class="logo-holder"></div> <!--This needs to be 1024px centered-->
    <div class="menu-holder"></div> <!--This needs to be 1024px centered-->
</div>
<div class="main"> <!--This needs to be 100%-->
    <div class="rotating-banner"></div> <!--This needs to be 1024px centered-->
    <div class="promo-holder"> <!--This needs to be 1024px centered-->
        <div class="promo-banner"></div>
        <div class="games-list"></div>
    </div>
</div>
<div class="footer"> <!--This needs to be 100%-->
    <div class="footer-holder"></div> <!--This needs to be 1024px centered-->
</div>

Tnks in advance, Tonio

Answer 1

.top, .main, .footer {
  width: 100%;
  text-align: center;
}
.logo-holder, .menu-holder, .rotating-banner, .promo-holder, .footer-holder {
  width: 1024px;
  margin: 0 auto;
  text-align: left;
}

should do it.

Answer 2

by default the divs will take up 100% width, as they are block level elements.

on the classes for top,main,footer add margin:0px auto; for the divs inside those, add your width.

This may not center in ie, so also add text-align:center; and then in the inner divs add text-align:left;

Answer 3

.top { width:100%; margin:0 auto; }
.logo-holder,  .menu-holder {width:1024px; margin:0 auto }

But you should use IDs for holders & other unique wrapper elements.