CODEWITHSUNDEEP
htmlcss
user291701
user291701

Reputation: 39681

Put spacing between divs in a horizontal row?

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

Upvotes: 10

Views: 175635

Answers (7)

Cristian Lupascu
Cristian Lupascu

Reputation: 40546

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>

Upvotes: 17

The_HTML_Man
The_HTML_Man

Reputation: 347

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>

Upvotes: 0

Pow-Ian
Pow-Ian

Reputation: 3635

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/

Upvotes: 7

gkond
gkond

Reputation: 4294

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/

Upvotes: 1

KGemini22
KGemini22

Reputation: 1

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.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

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;
}

Upvotes: 2

Jared
Jared

Reputation: 6060

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.

Upvotes: 1

Related Questions