Three column css layout

How to format three colums with background images

[makatozi]

I am building a site for a client using a mix of html and css. The body is defined in the css inside a div tag named container. The client wants the same image to "hug" the body of the site on both sides (left and right). I have been trying all day to do this but can't seem to come up with an acceptable solution. Any help that any of you might provide would be greatly appreciated.

[SuzyUK]

Hi makatozi and Welcome to the Forums!

have you removed the default margin/padding on the HTML and body elements?

html, body {margin: 0; padding: 0; border: 0;}

I added border in there as IE has a 1px border, usually not noticeable, but as a habit there's no harm in adding that

Suzy

[makatozi]

I have decided to make the background image larger than it was originally and had it repeat. I had no luck with CSS trying to do this 3 column layout. I will revisit it later. Seems like a lot of people are having this same issue and noone seems to have a "perfect" solution. Thanks for your reply.

[cuce]

I don't know if you've found this one before, but here's how I would handle a 3column css layout...

1- you build a wrapper with a repeating image to layout the columns visually.

#content{background:url(contentbg.jpg);width:700px;}

2- then build a wrapper for the left and middle columns and float it appropriately.

#leftandmiddle{width:600px;float:left;}

3- make ids for the right middle and left columns and float them appropriately..(sometimes it takes some fiddling to line them up just right with your background image)

#left{width:100px;float:left;}
#middle{width:500px;float:right;}
#right{width:100px;float:right;}

4- create a footer to clear the floats.
#footer{clear:both;}

your html should look something like this in the end...
<div id="content">
<div id="leftandmiddle">
<div id="middle">
<p>i am the middle content</p>
</div>
<div id="left">
<p>i am the left content</p>
</div>
</div>
<div id="right">
<p>i am the right content</p>
</div>
<div id="footer">
<p>i am the footer</p>
</div>
</div>

I have heard of a new way of doing this which is aparently much more simple, using the css3 multi column module, and a little javascript to compensate for less cooperative browsers. look up css3 multi column in google and you should be able to track it down.

[makatozi]

Hey thanks for the reply. I will certainly try to manipulate things the way you suggested. I will post back if things work out using that technique. The javascript fixes I've seen don't quite do it the way I figured they would.

[juhwawa]

Hi, I have a similar question although it is with 2-column layout.

I have two divs - a left hand column (25%) and a main content area (75%).

When the browser is resized smaller the content area "breaks" and goes beneath the other one.

My client wants me to go to tables, but I'm really trying to avoid that as we've put a ton of work into making the div's look awesome every other way.

Help!

#page {

/* Set the width and height */
width: 100%;
margin-top: 0px;
white-space: nowrap;

}

#page_left {
width: 22%;
padding: 0px;
margin: 3px;
float: left;
display: inline;
}

#page_center {
width: 100%;
padding: 0px;
margin: 4px;
float: left;
margin-top: 12px;
display: inline;
}

[SuzyUK]

Hi juhwawa and Welcome to WebmasterWorld!

firstly, are you using a Doctype at the start of your pages.. IE's float model goes quirky when given width triggers as well as not having a valid doctype

next the widths (not including margins..) add up to 122% so this won't work in any browser

there's more but take a look at this thread [webmasterworld.com] for some 2/3 column techniques, see if any fit and ask away

thanks
Suzy