Three coloum problems.

[herghost]

Hi all,

 

I cannot get my three columns to display properly, basically this is what I have:

#theform {
background-color: #83baff;
width: 61em;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;			/* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
				only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#000;		/* right column background colour */
}
.threecol .colmid {
right:33%;			/* width of the right column */
background:#fff;		/* center column background colour */
}
.threecol .colleft {
right:33%;			/* width of the middle column */
background:#eee;	/* left column background colour */
}
.threecol .col1 {
width:33%;			/* width of center column content (column width minus padding on either side) */
left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
width:33%;			/* Width of left column content (column width minus padding on either side) */
left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:33%;			/* Width of right column content (column width minus padding on either side) */
left:85%;			/* Please make note of the brackets here:
				(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
}
-->
/*------------------------------------------------form--------------------*/

 

and my html is:

<div id="onebody">

<div class="colmask threecol"> 
<div class="colmid"> 
	<div class="colleft"> 
		<div class="col1"><h3>User Information</h3>
            </div> 
            
            <div class="col2"><h3>whats this</h3>
            </div>
            
            <div class="col3"></div>and this</div>

		</div>
</div>

</div>

 

Which is meant to display 3 equal size boxs, however the problem I have is that box 2 and 3 appear on the far left with the display text over the top of one another. I am not that skilled in css and generally use templates, which is where this comes from, but its two different templates I am kinda trying to merge into one

 

If anyone is kind enough to point out what I am doing wrong then I would be greatful, I have attached the full .css file as well.

 

 

 

[attachment deleted by admin]

[haku]

The text 'and this' is outside your 3rd column div.

[herghost]

ah thanks, proved that fiddling with css for 2 hours was never going to get me anywhere!