8

I have 4 divs in a horizontal row. I want to put space between the divs (using margin, I guess?), but the divs overflow their parent container when I do that.

With zero margin, they line up nicely on one line:

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div>
</div>

Now when I introduce a margin of 5px, the last button wraps:

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div>
</div>

I guess this is because the width attribute, when a percentage, doesn't take the margin into account for the element's total width? What's the right way to do this?

Thanks

captainsac
  • 2,484
  • 3
  • 27
  • 48
user291701
  • 38,411
  • 72
  • 187
  • 285
  • possible duplicate of [CSS Div width percentage and padding without breaking layout](http://stackoverflow.com/questions/3538875/css-div-width-percentage-and-padding-without-breaking-layout) – Diodeus - James MacFarlane Nov 21 '12 at 16:24
  • just use your existing divs without margin as wrapper divs. in every div you put then another div that holds the content and has no width and your margins. – Sven Bieder Nov 21 '12 at 16:30

7 Answers7

15

A possible idea would be to:

  1. delete the width: 25%; float:left; from the style of your divs
  2. wrap each of the four colored divs in a div that has style="width: 25%; float:left;"

The advantage with this approach is that all four columns will have equal width and the gap between them will always be 5px * 2.

Here's what it looks like:

.cellContainer {
  width: 25%;
  float: left;
}
<div style="width:100%; height: 200px; background-color: grey;">
  <div class="cellContainer">
    <div style="margin: 5px; background-color: red;">A</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: orange;">B</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: green;">C</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: blue;">D</div>
  </div>
</div>
Cristian Lupascu
  • 39,078
  • 16
  • 100
  • 137
  • Ok this one is most convenient for my particular situation, thank you. – user291701 Nov 21 '12 at 17:29
  • would it be useful to have the code inline in your answer, in case that link ever goes down? https://pastebin.com/raw/mkmt2bTs – barlop Nov 17 '17 at 02:08
  • @GolfWolf that is a lot more code than the one at the pastebin link I mentioned, which I must've got off one of the jsfiddle links you included. The code you posted has a ton of superfluous stuff – barlop Nov 17 '17 at 07:55
  • @barlop Right. I've removed the extra stuff. – Cristian Lupascu Nov 17 '17 at 08:27
7

I would suggest making the divs a little smaller and adding a margin of a percentage.

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div>
</div>

http://jsfiddle.net/YJT7q/

captainsac
  • 2,484
  • 3
  • 27
  • 48
Pow-Ian
  • 3,607
  • 1
  • 22
  • 31
2

Quite a few ways to apprach this problem.

Use the box-sizing css3 property and simulate the margins with borders.

http://jsfiddle.net/Z7mFr/1/

div.inside {
 width: 25%;
 float:left;
 border-right: 5px solid grey;
 background-color: blue;
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
}

<div style="width:100%; height: 200px; background-color: grey;">
 <div class="inside">A</div>
 <div class="inside">B</div>
 <div class="inside">C</div>
 <div class="inside">D</div>
</div>

Reduce the percentage of your elements widths and add some margin-right.

http://jsfiddle.net/mJfz3/

.outer {
 width:100%;
 background:#999;
 overflow:auto;
}

.inside {
 float:left;
 width:24%;
 margin-right:1%;
 background:#333;
}
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
1

This is because width when provided a % doesn't account for padding/margins. You will need to reduce the amount to possibly 24% or 24.5%. Once this is done you should be good, but you will need to provide different options based on the screen size if you want this to always work correct since you have a hardcoded margin, but a relative size.

Jared
  • 5,840
  • 5
  • 49
  • 83
  • Or you can switch to 100% percentages as Pow-lan has suggested. The implementation will depend on the amount of control that you require. – Jared Nov 21 '12 at 16:29
1

You can set left margins for li tags in percents and set the same negative left margin on parent:

ul {margin-left:-5%;}
li {width:20%;margin-left:5%;float:left;}
<ul>
  <li>A
  <li>B
  <li>C
  <li>D
</ul>

http://jsfiddle.net/UZHbS/

BDL
  • 21,052
  • 22
  • 49
  • 55
gkond
  • 3,818
  • 2
  • 20
  • 27
0

Another idea: Compensate for your margin on the opposite side of the div.

For the side with the spacing you are looking to achieve as an example: 10px, and for the opposing side, compensate with a -10px. It works for me. This likely won't work in all scenarios, but depending on your layout and spacing of other elements, it might work great.

KGemini22
  • 1
0

Put all the divs in a individual table cells and set the table style to padding: 5px;.

E.g.

<table style="width: 100%; padding: 5px;">
<tbody>
<tr>
<td>
<div style="background-color: red;">A</div>
</td>
<td>
<div style="background-color: orange;">B</div>
</td>
<td>
<div style="background-color: green;">C</div>
</td>
<td>
<div style="background-color: blue;">D</div>
</td>
</tr>
</tbody>
</table>
The_HTML_Man
  • 347
  • 1
  • 4
  • 13