CODEWITHSUNDEEP
htmlcss
johnsorrentino
johnsorrentino

Reputation: 2731

Consistent spacing between neighboring elements inside a container

I have a container of certain height and width that holds a number of children (divs). I would like to have a 4px lightblue border around each div. Two neighboring divs should only have 4px space between them.

I'm able to accomplish this by manually setting the heights, widths, and margins/borders, but I'm sizing the children by percentage of the parent.

Here's a fiddle I have set up showing the divs in the parent, but without any spacing or border.

.container {
    height: 300px;
    width: 300px;
    background-color: lightblue;
}

.left {
    width: 30%;
    height: 100%;
    background-color: lightyellow;
    float: left;
}

.top-right {
    width: 70%;
    height: 50%;
    background-color: lightred;
    float: right;
}

.bottom-middle {
    width: 35%;
    height: 50%;
    background-color: lightpink;
    float: left;
}

.bottom-right {
    width: 35%;
    height: 50%;
    background-color: lightgreen;
    float: right;
}

.border {
    /* margin: 4px; */
}
<div class="container">
    <div class="left border"></div>
    <div class="top-right border"></div>
    <div class="bottom-middle border"></div>
    <div class="bottom-right border"></div>
</div>

http://jsfiddle.net/ymv0oave/

Upvotes: 0

Views: 106

Answers (3)

ClementBresson
ClementBresson

Reputation: 55

You can use the calc() function is css to make use of % and still have an exact 4px border.

HTML:

<div class="container">
    <div class="left border-right"></div>
    <div class="top-right border-bottom"></div>
    <div class="bottom-middle border-right"></div>
    <div class="bottom-right"></div>
</div>

CSS:

.left {
    width: 30%              //Fallback for the 0.8% people still using IE7/IE8
    width: calc(30%-4px);   //HERE
    height: 100%;
    background-color: lightyellow;
    float: left;
}

.top-right {
    width: 70%;
    height: 70%                //Fallback for the 0.8% people still using IE7/IE8
    height: calc(50% -4px);    //HERE
    background-color: lightred;
    float: right;
}

.bottom-middle {
    width: 35%              //Fallback for the 0.8% people still using IE7/IE8
    width: calc(35% -4px);  //HERE
    height: 50%;
    background-color: lightpink;
    float: left;
}

.bottom-right {
    width: 35%;
    height: 50%;
    background-color: lightgreen;
    float: right;
}

.border-right {
    border-right: 4px solid lightblue;
}

.border-bottom {
    border-bottom: 4px solid lightblue;
}

Upvotes: 0

Felix A J
Felix A J

Reputation: 6490

2px border for all divs, and 2px border for container.

.container {
 ...
  border: 2px solid blue;
}
.container div{
  box-sizing: border-box;
  border: 2px solid blue;
}

https://jsfiddle.net/afelixj/mja5kfvw/

Upvotes: 2

ASG
ASG

Reputation: 63

Putting the full answer here 

.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;

}

.remove-right{
border-right: none;
}

Then put the class to your div class tag

<div class="container">
  <div class="left border remove-right"></div>
  <div class="top-right border remove-right "></div>
  <div class="bottom-middle border"></div>
  <div class="bottom-right border"></div>
</div>

Upvotes: 0

Related Questions