May
20
2012

Layout Love = Elegant CSS

It’s been about a year and half since I started tackling pure CSS layouts.  This is my fifth attempt, and was by far the cleanest and easiest to make.  There are no HTML or CSS errors, there are no sneaky work arounds to make the layout look like I wanted to.

Below is the divs for the current layout.  #box centers the layout and sets the layout width, #body sets up the header and begins the content background, #box2 sets up the tiles the content background, #content and #side are floats, and #footer closes the floats and contains the last sidebar.

#cross is not gone into in depth in this tutorial as a lot of the positioning concepts were explored in the article CSS Header Tutorial.

<body>
<div id="box">
   <div id="body">
	<div id="cross">
	    <div id="expiation-header">
                <a href="/">ex&nbsp;piation</a>/<a href="/blog" style="font-size:30px;">blog</a>
            </div> close #expiation-header
	    <div id="nav"></div>
	</div> close #cross
   </div> close #body
   <div id="box2">
      <div id="content">
      </div>  close #content
      <div id="side">
      </div> close #side
      <div id="footer">
      </div> close footer
   </div> close box2
</div> close box </body> 

The Classes:

We’ll start with the html and body declarations for the page, as they really set the stage for everything.  “html, body” sets the height of the page to 100%, padding and margins of those page elements to zero.

The body declaration sets up the background.  Note that background image is a large tiled jpeg, I still wanted the background centered on X, I set the tile of the background move around the center of the graphic, centering the background with the background-position attribute gives the page cleaner look.  Note that the background is also in a fixed position, I choose this option to really let the page’s transparency show through as the user scrolls.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
     background-color: #8bc1bf;
     background-image: url('/images/layout/adore_bg.jpg');
     background-attachment: fixed;
     background-position: top center;
}

The main box has a static position, this forces the position attribute into it’s default state.  This is important as the rest of the style declarations play with positioning a lot. The width of the layout is set, along with centering the page through the marin-left/margin-right auto trick.

#box {
	position: static;
	width: 1000px;
	min-height:100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

The #body declaration sets up the main header image.  The graphic begins to gradient of the background in the content box, along with the borders.  The actual header image is set as a background to allow divs within this ID to set up functional portions of the header.  At some point I’ll do “Header Tutorial Part II”, and show how drop down menus in #cross were set up.  Setting the height, width, padding, and margins of this ID was important to make sure that this div stays in line with the rest of the page content.

#body {
	width: 1000px;
	height: 654px;
	margin: 0;
	padding: 0;
	background-image: url('/images/layout/adore_body.png');
        background-position: top center;
        background-repeat: no-repeat;
}

The #box2 declaration is set in a div directly after #body, this div wraps around the rest of the content setting the width and the background.  Just in case of a mistake in the code the background is set to only repeat on Y.  This background is a transparent png with a Y tiling of the content borders, and the transparent background of the content box.

#box2 {
	width:1000px;
	margin: 0;
	padding: 0;
	background-image: url('/images/layout/adore_main_bg.png');
	background-repeat: repeat-y;
	background-position: top center;
}

The #content declaration floats left and has the padding set to clear the left border, and to make space between #content and the sidebar.  Remember that padding gets added to the total width of the div, so with 20px padding on the left and right the actual width of the div is 740px.  This is important to prevent throwing the layout out of alignment by going over 1000 pixels total between #content width and sidebar width.

#content {
	margin: 0;
	padding-top: 8px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	width:700px;
	float: left;
}

The #side is set to a width of 220px with a left and right pad both set to 20px, making the actual width 260px.  260 + 740 = 1000.  Which means both divs are the exact number of pixels to remain next to one another as floats inside of #box2.

#side {
        margin: 0;
        padding-top: 16px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        width:220px;
        float: right;
}

The #footer clears the floats from #content and #side, allowing the background in #box to tile behind all of the content on the page.  The last of the sidebar content is displayed in the footer of this layout, look for another tutorial in the near future on horizontal footers.

#footer {
	width:1000px;
	margin: 0;
	padding: 0;
	clear: both;
}

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CommentLuv badge