I have some problems with creating a 3 column setup in CSS. The problem is when I want spacing between the columns.

 

I have tried this:

 

CSS:

#around {
text-align: left;
margin: 0px;
padding: 0px;
border:0;
width: 693px;
background-color:black;
}


#leftcol {
float: left;
width: 231px;
background-color:red;
}

#rightcol {
float: right;
width: 231px;
background-color:blue;
}

#centercol { 
float: left;
width: 231px;
background-color:green;
}

 

 

This makes no space between them, so I tried with padding-right:5px at the leftcol padding-left:5px padding-right:5px at the centercol and padding-left:5px at the rightcol, but this just made a mess.

 

What do I do wrong?

Anyone able to help? thank you...

Put a margin on the elements inside each column.

 

Eg...

 

#rightcol p { margin: 10px; }

 

That'll bump your paragraphs 10px in from the edge, without making the columns drop.

thanks alot! great tip!

No problem.

 

Also, if you find that one column drops in IE6, try making one of the columns 1px thinner. IE6 doesn't seem to like maths.

One more problem...

This worked with text in the columns, but when I try to insert a picture in the colums I got a little problem.

Got any great ide to solve this?

 

Tried doing this:

 

#around {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 693px;
}


#left3col {
float: left;
width: 231px;
background-color: blue;
}

#right3col {
float: right;
width: 231px;
background-color: red;
}

#center3col { 
float: left;
width: 231px;
background-color: green;
}

#left3col p img { 
margin-right:5px; 
margin-top:0;
margin-left:0;
margin-bottom:0;
text-align:justify; }

#right3col p img { 
margin-left:5px;
margin-top:0;
margin-right:0;
margin-bottom:0;
text-align:justify; }

#center3col p img { 
margin-right:5px; 
margin-top:0;
margin-left:5px;
margin-bottom:0;
text-align:justify; }

Maths time!

 

Width of column - margin = x.

 

If x is smaller than the width of your image, you'll have problems.

To avoid applying padding to a floated div, an alternative would be to create an additional class say

 

.inside10 {
padding:10px;
}

and then in the markup you create a nested div inside the floats and apply the inside10 class to them i.e.

 

<div id="leftcol">
<div class="inside10">Left Content</div>
</div>

I just used this 3 column template for a new site - http://matthewjamestaylor.com/blog/holy-gr...quirks-mode.htm - and it's the bee's knees.