Placing boxes

[exotic_ang]

I've encountered a problem with boxes. I have set 3 boxes and alligned them perfectly. Once I add the border to the boxes, they misalign!

with his code, the 3 boxes are as image1.jpg (attached)

#boxgrey
{
    background-color:#999;
    width:220px;
    height:200px;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 30px 275px;
}

#boxorange1
{
    background-color:#D35203;
    width:220px;
    height:200px;
    border-color:#CCC;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 30px 85px;
}

#boxorange2
{
    background-color:#D35203;
    width:220px;
    height:200px;
    border-color:#CCC;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 30px 270px;
}

when I add this code to the 3 boxed, they are as image2.jpg (attached)

border-color:#999;
border-width:4px;
border-style:solid;

any clues? i need them to be like image1.jpg

[almostbob]

how are the boxes set
is each separate or is one a child of another <div></div><div></div><div></div> or <div><div><div></div></div></div></div> it appears there is a border added to each successive box, makes me think it is something like the second (notsogood) sample

[exotic_ang]

yep ur right i did not close the div on each one! thanks alot

[exotic_ang]

i closed the divs now but they still did not align :/

[almostbob]

show the html then, & lets get debuggin

[exotic_ang]

sorry for taking long but I was busy with other things these 2 days! You want all the html? or just the part where the boxes are shown? Cause all ive written in that section is this!

<div id="boxorange1"></div>
<div id="boxgrey"></div>
<div id="boxorange2"> </div>

[teedoff]

Yes all your html. I'm going to guess its a box model issue, which means you're trying to align elements side by side, but the containing element is not wide enough. So all your html and css will be needed.

[exotic_ang]

ok i think i understood, let me set the margins to 0 where i dont need them cause now i think i got a margin of 70 on both sides thats why they are misplacing. thanks for the hint i will let you know if it worked

[exotic_ang]

ok im lost...this is my first ever website and im getting mixed up! I know what the problem might be. I kind of understood what you said and removed the margins and managed to get the boxes on one level. but the middle and the far right are now stuck to each other. |Tried giving different margins but none seem to work so now i just reset them to 0. Here is my code up till now. Am going to paste the css and html regarding these boxes

css:

#boxgrey
{
    float:left;
    background-color:#999;
    width:220px;
    height:200px;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 0;
    border-color:#999;
    border-width:4px;
    border-style:solid;
}

#boxorange1
{
    float:left;
    background-color:#D35203;
    width:220px;
    height:200px;
    border-color:#CCC;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 0 20px 0 85px;
    border-color:#999;
    border-width:4px;
    border-style:solid;
}

#boxorange2
{
    float:left;
    background-color:#D35203;
    width:220px;
    height:200px;
    border-color:#CCC;
    border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -moz-border-radius:1.5em;
    position: relative;
    margin: 0;
    border-color:#999;
    border-width:4px;
    border-style:solid;
}

html:

<div id="boxorange1" class="clearfix">Services</div>
<div id="boxgrey" class="clearfix">Find us</div>
<div id="boxorange2" class="clearfix">Other</div>

[exotic_ang]

ok i figures it out! added margins to the grey box only and worked..thanks just the same for your help