2 / 3 Column Layouts & Site Centering

11 /14 2014

This article will explain how you can sort your template into columns, there are 3 main types of column formats though the 3 column template with side bars on either side, the 2 column template with only one side bar and templates without sidebars known as 1 column templates, but there are also other layouts too.

2 Column Layout

Here we will explain how to create a 2 column layout, much like the ones used in FC2's templates. While there are various methods, we will introduce a relatively simple wraparound technique.

==Style sheet　CSS

/* Default
------------------------------------------------- */

body {
 text-align: center;　/* This centers text. */
}

/* Layout
------------------------------------------------------------ */

#container {
 width: 740px;　/* Set the width of content */
 margin-left: auto;　/* Automatically computes left margin */
 margin-right: auto;　/* Automatically computes right margin*/
 text-align: center;
}

#header {
 padding: 20px 20px;
}

#main {
 float: left; /* Wraps the main part (entries, etc.) around the left  */
 width: 500px  /* Set width */
}

#sidemenu {
 float: right; /* Wraps side menu around right */
 width: 200px; /* Set width */
}

#footer {
 clear: both; /*Remove all wrap arounds */
 width: 100%;

HTML

<body>
  <div id="container">
    <div id="header">Header Contents</div>
    <div id="wrap">
      <div id="main">Entry Content</div>
      <div id="sidemenu">Menu Contents</div>
    </div>
    <div id="footer">Footer Contents</div>
  </div>
</body>

3 Column Layout

This layout is useful if you have a lot of information that you want to display. This layout is possible by adjusting the 2 column layout.

==Style sheet CSS

/* Default
------------------------------------------------- */

body {
 text-align: center;　/* Centrally Align Text */
}

/* Layout
------------------------------------------------------------ */

#container {
 width: 900px;　/* Contents width set at 900px */
 margin-left: auto;　/* Automatically compute left margin */
 margin-right: auto;　/* Automatically compute right margin */
 text-align: center;
}

#header {
 padding: 20px 20px;
        background-image: url("http://templates.blog.fc2.com/template/white_style/header_image.gif");
        background-repeat:no-repeat;
}

#wrap {
 width: 680px; /*Width set at680px（460px + 208px) */
 float: left; /*Wrap main and side menu 1 around left*/
}

#main {
 float: right; /* Wrap entries, etc. around right */
 width: 460px !important; /* Set width*/
 width /* for IE5.5 */: 500px;
 margin-left: 12px; /* Set left margin */
}

#sidemenu1 {
 float: left; /* Wrap side menu 1 around left */
 width: 208px; /* Set width */
}

#sidemenu2 {
 float: right; /* Wrap side menu 2 around right */
 width: 208px; /* Set width*/
}

#footer {
 clear: both; /* Remove all wrap arounds */
 padding: 10px 0px;
 width: 100%;

HTML

<body>
  <div id="container">
    <div id="header">Header Content</div>
    <div id="wrap">
      <div id="main">Entry Content</div>
      <div id="sidemenu1">Menu Content</div>
    </div>
    <div id="sidemenu2">Notice Board Content</div>
    <div id="footer">Footer Content</div>
  </div>
</body>

Site Centering

There are some templates that are already centered, but we will explain here how you can center your own template.
A commonly used method is to enclose contents as block levels, and by setting the margin to automatic your browser will compute a value from the image size and ultimately your left and right margin will be equal and your template centered.

==Style sheet CSS

/* Layout
------------------------------------------------------------ */

#container {
 width: 900px;  /* Set Contents width to 900px */
 margin-left: auto;  /* Automatically compute left margin */
 margin-right: auto;  /* Automatically compute right margin*/

*HTML

<body>
<div id="container">
Enter contents parts of entries or menus
</div>
</body>