0

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

Edited by Dani: Formatting fixed

Attachments image1.jpg 12.86 KB image2.jpg 12.66 KB
3
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by exotic_ang
0

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

Edited by almostbob: n/a

0

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>

0

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.

0

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

0

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>

Edited by mike_2000_17: Fixed formatting

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.