Align divs horizontally and perfectly fit the width of parent

Question

I am trying to align 4 divs horizontally, but i want each of the divs to fill 25% of the width of the parent, that way they are perfectly filling out the parents width.

You can see my attempt here: https://techsource.dk/query/combine.php

I have 4 divs of the width of 250px, with no padding, margin and borders, inside a 1000px width parent, however only 3 of the 250px divs fits inside the parent.

If i set the width of the children to 240px or lower, they will fit into the parent, but i cannot understand why 4x250px width divs cannot fit in a 1000px width parent? I inspected it with chrome, and it seems correctly understood by the browser.

You can see gaps if set `background-color: white` to parent element. Those are due to gaps in the code between `inline-block` dispalyed tags which transformed to single space. — extempl, Oct 26 '18 at 08:32
https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — misorude, Oct 26 '18 at 08:32
The answers suggested down should work, I just wanted to let you know that new lines in your HTML translate to a little space in the rendered page for inline-block elements. It's just good to know. Also, another way to get rid of it is to begin a comment on the top line and end it on the bottom line. Top line you end it with `` — Jonas Grumann, Oct 26 '18 at 08:33

score 4 · Accepted Answer · answered Oct 26 '18 at 08:38

The problem is with inline-block display style. It adds white-space between your elements.

Elements in the inline formatting context will cause white spaces from carriage returns and white-spaces in your HTML

quote from a comment to another question here on StackOverflow : inline-block

I also suggest you don't use fixed px width on the child elements. But use percentage. That way you are sure they will always stay 4 on one row.

FlexBox is the way to go when styling your layout. It's very easy to use and understand. Check here the docs -> FlexBox

That being said, check snippet below

.parent {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
}
.child {
  flex: 0 25%;
  height:100px;
  background:red;
  border:1px solid green;
  box-sizing:border-box;
}

<div class="parent">
  <div class="child">

  </div>
  <div class="child">

  </div>
  <div class="child">

  </div>
  <div class="child">

  </div>
</div>

OBS i used box-sizing because i also used border on the elements. Box sizing makes the border be included in the width of the element. Not outside it. It's irrelevant in your case but i used it to separate the elements.

Thank you for the explanation, this solved my issue – fresser Oct 26 '18 at 08:49 — fresser, Oct 26 '18 at 08:49
@fresser glad i could help. Cheers ! :D – Mihai T Oct 26 '18 at 08:56 — Mihai T, Oct 26 '18 at 08:56

symlink · Answer 2 · 2018-10-26T08:45:05.027

You can fit 4 250px width divs in a 1000px container, if you use box-sizing:border-box on the child divs. This includes the padding and the border in the width of the div, otherwise they will overflow to a new row.

.parent{
   width:1000px;
   border:solid green 4px;
}

.child{
   border:solid darkblue 1px;
   background:lightblue;
   width:250px;
   height:300px;
   float:left;
   box-sizing:border-box;
}

.parent::after{
   content:" ";
   display:table;
   clear:both;
}

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

score 0 · Answer 3 · answered Oct 26 '18 at 08:28

You used inline-block to put your divs on the same line. This add whitespaces between tags if you have whitespaces in your code. Try using float:left on children or, more appropriately, display:flex in your container:

.container
{
    display:flex;
    width:1000px;
}

score 0 · Answer 4 · answered Oct 26 '18 at 08:30

0

containing div that you have set at width 1000px - put a class on it to target it, eg

.containerswrapper {
   display:flex;
}

div[id^=Container] {
   flex: 0 0 25%;
/* which is short for : 1. don't grow, 2. don't shrink, basis width 25% */
}

answered Oct 26 '18 at 08:30

Carol McKay

2,438
1
15
15

score 0 · Answer 5 · answered Oct 26 '18 at 08:33

0

As you have inline-block to the 4 child elements which creates a gap in between the inline-block elements.

So to remove it via the code, just set

font-size: 0px;

to the div which has a width of 1000px and it will solve your problem.

answered Oct 26 '18 at 08:33

Sonia

1,909
1
11
13

score 0 · Answer 6 · answered Oct 26 '18 at 08:41

0

I agree with @Ruddle to use flex as it's more elegant and flexible in achieving nice layout.

Here's an example that I created https://codepen.io/anon/pen/VEgegK

answered Oct 26 '18 at 08:41

Wei-jye

412
1
6
23

Align divs horizontally and perfectly fit the width of parent

6 Answers6