I am trying to format some divs on my webpage using CSS. I am trying to float left that are themselves in a container div (Three equaly spaced boxes within a box). I have been unable to get the three divs to be spaced equally in the conatiner div. I did the calculations so that each of the three divs are equal width. I also took into consideration the borders that I put around them. Each border is styled using pixels. If someone could help me so I could get these divs looking they way I want them, I would apperciate it.

Thanks,
Truck35

are define the div following format

Html

<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>

Hey Truck35. mathssjohn is spot on. I might suggest using one class instead of separate id's for efficiency that way you only need one definition:
(Also, if you are having trouble floating the elements, remember that the parent container should be positioned "relative".)
.wrapper {
position:relative;
width: 600px;
min-height:600px;
}
.oneThirdWidth {
float:left;
width:33.3%;
}

<div class="wrapper">
<div class="oneThirdWidth">Div#1</div>
<div class="oneThirdWidth">Div#2</div>
<div class="oneThirdWidth">Div#3</div>
</div>

Now there is a new option called flex box layout. It is very simple to use and is more effective.

You have a parent div which contains 3 child divs.

.parent-div{
display: flex;
}

Add this code and immediately all the child div will be placed horizontally inside the parent div.

If it is not working, you can add one more line

.parent-div{
display: flex;
flex-direction: row;
}


This should work fine.

You can learn more about flex-box layout techniques online.


Regards,

Pavithra Ramesh
Spidergems