CODEWITHSUNDEEP
css
Toskan
Toskan

Reputation: 14941

Clean way to palce div boxes with border next to each other - resulting into a 1 px wide borders

Ok following scenario in jsfiddle. The squares are coming from a CMS, i cannot hard code something. I need a clean way to always get 1 border thickness. At the moment the border thickness is sometimes 1 px and sometimes 2 px. The width of the container is given and it will always be 3 squares wide. So it will never have, say, 2 squares. Always $number_of_squares % 3 === 0 See screenshot

enter image description here

Is there a trick to it?

HTML:

<div class="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

CSS:

div{
    display:inline-block;
    height: 100px;
    width: 100px;
    vertical-align: top;
    background-color: burlywood;
    border: 1px solid #ccc;
}

.container{
    width: 400px;
    height: 400px;
    background-color: white;
    border: none;
}

See jsfiddle

Upvotes: 2

Views: 1338

Answers (1)

demonofthemist
demonofthemist

Reputation: 4199

give container padding:1px 0 0 1px;

& divs margin:-1px 0 0 -1px;

Here is jsFiddle: DEMO

Upvotes: 8

Related Questions