Hello everyone... i am going to apologize to everyone ahead of time... i am sure that this question have been asked (ans answered) plenty of times in the past around here...

in any case, i am trying to get 3 boxes lined (in one row) up at the bottom on my pages, each one being 30% width.... I figured out that i need 3 DIV classes (or types)... one for left, one for center, and one for right...

My CSS skills are "suck" at best, so i was wondering if somebody here would give me some help as to what parameters i need to use in the SCC portion of my code to build the DIV tags for my 3 boxes...

ohh, and here is a link to a page with a webmaster who actually knows how ot do it... (i am trying to make the same boxes as they have for "Appointments" "Don't Pay" and our "Quality")
http://www.robbinsbros.com/

If anyone could clue me in on this top secret... i'd much apreciate it...

It's pretty simple actually. Here is something that I just wrote up real quick.

CSS

<style type="text/css">
.container {
width: 600px;
height: 100px;
border: 1px solid #000;
}
#left {
float: left;
width: 170px;
border: 1px solid #000;
height: 100px;
}
#center {
margin-left: 45px;
float: left;
width: 170px;
border: 1px solid #000;
height: 100px;
}
#right {
float: right;
width: 170px;
border: 1px solid #000;
height: 100px;
}
</style>

<div class="container">
<div id="left">
left
</div>
<div id="center">
middle
</div>
<div id="right">
right
</div>
</div>

This may not be the best way to do it, but when I looked at the source code of the Robbins Bros website, I found that this is just about the same concept.

Hope it helps!
- Steve

And you can change Steve's code easily to use %s just change 170px after the widths to 33%.

That margin-left with the float:left on the #center div will trigger a margin-doubling bug in IE6, so you'll need to be careful of that. You either have to alter the coding to get around it so you don't trigger the bug, or you'll need to use conditional comments to call a separate 'fixes' css file for IE6 which would contain this code:

#center{display: inline;} - that fixes the bug.

That margin-left with the float:left on the #center div will trigger a margin-doubling bug in IE6, so you'll need to be careful of that.

Thanks for the warning LadynRed. However, I've tested it out and it does not, in fact, trigger that problem. I don't know why.

Strange, because those are the exact circumstances that will trigger that bug in IE6.

You guys rock!!!

... unfortunately even though you guys do rock, i am still having some problems....

maybe somebody can help me out... i have two files (index.html and index.css)... i placed your code in my css file (with few minor changes) so now it looks like this:

.addcontainer {
width: 600px;
height: 100px;
border: 1px solid #000;
}
#addleft {
float: left;
width: 33%;
border: 1px solid #000;
height: 100px;
}
#addcenter {
display: inline;
margin-left: 45px;
float: left;
width: 33%;
border: 1px solid #000;
height: 100px;
}
#addright {
float: right;
width: 33%;
border: 1px solid #000;
height: 100px;
}

and added this portion to my HTML (right above </body> tag)

<div class="addcontainer">
<div id="addleft">
left
</div>
<div id="addcenter">
middle
</div>
<div id="addright">
right
</div>
</div>

 
<hr class="cleaner" />

any reason i would end up with left box in it's own row, and middle and right in a row under it?

It's because the width of all the divs, including all the borders, is wider than 600px. Get rid of margin-left: 45px;

- Steve

As expected... you were right on with a solution... thanks - Steve... you the man!!!

Just have to quote this message

... unfortunately even though you guys do rock, i am still having some problems....

That's the way it goes...