The Great Horizontal Divide

A common trend in design is layouts that are horizontally divided, but still have a set width in the center. By that I mean they’re horizontally divided, but still have a set width in the center. It’s a great way to break up your design into distinct sections, without creating clutter. Here’s how to create one:First, create containers for each section you’d like to create:

<body>
<div id="header"></div>
 <div id="intro"></div>
 <div id="content"></div>
<div id="footer"></div>
<body>

Pretty simple. These are your full sections.Now, since you’re keeping the same color across the entire horizontal section, you’ll add another container, inside each section, that will only cover your actual content area.

<body>
<div id="header">
   <div class="wrapper"></div>
</div>
<div id="intro">
   <div class="wrapper"></div>
</div>
<div id="content">
   <div class="wrapper"></div>
</div>
<div id="footer">
   <div class="wrapper"></div>
</div>
<body>

And finally, some css to put it all together:

body { padding:0; margin:0; }
#header { background-color:#494949; padding:5px 0; margin:0; }
#intro { background-color:#CACAAF; padding:5px 0; margin:0; }
#content { background-color:#EFEFEF; padding:0; margin:0;}
#footer { border-top:5px solid #494949; }
.wrapper { margin:0 auto; padding:0; width:775px; }
h1 { color:#EFEFEF; }
p { margin:0; padding:10px 0; }

I’ve created an example html file as well: Horizontal – Fixed Width Layout Example

And that’s it. Add some style and whatever else you like to make it your own.

Written on January 08, 2010 by Kevin

Learn more from our archives.