Centering your sites layout in the browser window

One of the most popular ways to classify designs on the web is to delineate them as either fixed-width or elastic. Designers who want maximum control over the layout of text, images, and other site elements generally created fixed-width designs. Current trends dictate that fixed-width designs belong in the center of the browser viewing window.

In this recipe, you'll learn how to center your design and make certain that your content is going where you want it to.

Getting started

You should have started writing the basic skeleton HTML of your theme. You need to make sure you have The Loop somewhere in your theme and an overall containing element that wraps all your content: header, main content, and footer.

First, you need to discern what the ID of the containing element for your content is. Take the following header code, which is usually contained within the header.php file, as a starting point, as it is fairly typical of a simple WordPress theme. The <div id="wrap"> tag is the key to using CSS to center the theme. If your file does not contain a site layout wrapping div tag above the header tag, then you will need to add one to your theme. In this example, the div is named wrap, but you may also see the same type of div named wrapper or rap or container, depending on the theme:

<body <?php body_class(); ?> <div id="wrap">

<?php /*note: the wrapper div may be called "rap", "wrapper","wrap", or "container" in your theme. The book example uses the standard "wrap". */ ?> <h1 id="header">

<a href="<?php bloginfo('url'); ?>/">

<?php bloginfo('name'); ?> </a> </h1>

Now, we take a look at the footer.php file and add a closing </div> tag for the wrap div: <div id="footer">

<p class="credit">

<!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->

<cite><?php echo sprintf(_("Powered by

<a href='http://wordpress.org/' title='%s'>

<strong>WordPress</strong></a>"), _("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?>

<?php wp_footer(); ?></div> <!--- close footer --- >

</div><!-- close wrap (wrapper div) -->

In this code sample, you can see that all of the content for the theme is wrapped in an element with an id attribute of wrap. Seeing this, we can start to correctly style the theme to center the theme in the browser.

Next we need to style the wrap div in the style.css file. We need to decide on a fixed width, and for simplicity's sake, you'll use 86 0 pixels for this example. Open up your theme's stylesheet (style.css), and enter the following styles:

/* note: WordPress Classic calls it "rap" but many themes refer to it as "wrapper" or "wrap". It is ok to change it here as long as you change it in your other files. */

#wrap{background-color:#ebe8b1;/* if you are not sure what is actually wrapped, set the background color to something easy to see and different from the rest of the theme colors */ border:1px solid #666666; margin:0 auto; width:8 60px;

After you enter the styles in the stylesheet, you should upload your theme and display your site in a browser and you'll see a bordered fixed-width design similar to the following screenshot:

In this example, you've created a div element with an id attribute of wrap and explicitly set the width to 860 pixels. Then, you've declared the margin property for the element and added some other styles so that you could see the centering in action.

The centering works because of the CSS box model that is defined by the W3C and followed by all major browsers. A discussion of the box model is beyond the scope of this book, but the basics of this technique are as follows:

► Set an explicit width so that the browser knows exactly how much space the element will occupy

► Set the top and bottom margins of the wrap element to 0

► Set the left and right margins of the wrap element to auto, and the browser calculates the correct margin to allow the element to remain centered

► The browser applies the margins it previously calculated

► The element is centered

Please note that this technique will work with all block-level elements that have a specified width. For example, you can center images or blockquotes in posts, or center widgets within your sidebar.

Six Figure Blog Marketing

Six Figure Blog Marketing

Take Advantage Of This Technology In The World Of WordPress™ Blogging And Start Making Real Residual Money Again. Even If You Are New To The Playing Field, It's Easy To Make Money Again On The Web, With A Free WordPress™ Blog, Some Good Advice And A New

Get My Free Ebook


Post a comment