2 / 3 Column Layouts & Site Centering

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.

layout-2_201411141500432d3.gif

==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.

layout-3_20141114150045021.gif

==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.

layout-1_20141114150042936.gif

==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>

FC2 Blog Manual

Welcome to FC2