2 column fixed width layout? No problem!

Ok, so you want to have a 2 column effect for your website but don’t know how to go about it so you don’t have to re-edit it for other browsers (IE)? No problem, first off start by laying out your div tags in the HTML of your site, something like this:

<div id=”maincontent”>
<div id=”contentLeft”></div>
<div id=”contentRight”></div>
</div>

The reason you have three divs needed for the layout is the main one is a holding div, noticed it’s closed outside of the contentLeft and contentRight, this means we can set the width and alignment of both left and right contents without breaking the layout.

Start off in your CSS file by targeting the maincontent and setting it at the desired width, for my example I am going to use 950px wide so it fits within the 1024×768 monitor resolution with equal space around the sides.

#maincontent {

width:950px;

margin-left:auto;

margin-right:auto;

}

So that’s the main content size sorted out, we will come back to this a little later. Next off the left content.

#contentLeft {

float:left;

display:inline;

width:460px;

margin:5px;

}

And now for the right:

#contentRight {

float:right;

display:inline;

width:460px;

margin:5px;

}

Job done. Always make sure that the width of the contentLeft and Content Right are smaller than the overall width of the maincontent, taking into account the margins and paddings applied to each. If you have one section that is offset and apprears lower than the left content adjust the width or margins till it sits in place next to each other.

The last thing to add is a clear:both to the main content. The clear property specifies which sides of an element where other floating elements are not allowed:

#maincontent {

clear:both;

width:950px;

margin-left:auto;

margin-right:auto;

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s