How to fit fixed width elements in a fixed width container?

Question

I have a parent element (div) with a fixed width of 1200px. There are no borders or padding on this element.

I have three inline child elements (divs) with fixed widths of 400px. Again, no borders, padding or margins.

I want my three child elements to sit on the same line but instead the third one gets pushed down. If I reduce their widths to 397px they all sit on the same line.

Why can't I divide the width of a parent container exactly by the number of children I want to sit abreast within that container? Much the same way that I can't define those child elements as percentage widths that add up to 100% (ie four children of all 25% width)?

Reset your CSS `* {margin:0;padding:0;border:0}` Or keep in mind browsers add `margins`, `padding`, and `borders` where you might not be aware of or expect it. — zer00ne, Mar 06 '18 at 05:01
`word-spacing` and the white space between the closing and opening of adjacent child elements can cause this. Do you have a code example? — Deepak Kamat, Mar 06 '18 at 05:06
Use box sizing `*, *:before, *:after { box-sizing: border-box; }` — hdotluna, Mar 06 '18 at 05:16

Abasaheb Gaware · Answer 1 · 2018-03-06T05:06:29.163

0

You can add css like this=>

   .parent_container{
      width:1200px;
      float:left;
    }

   .child1,
   .child2,
   .child3{
      float:left;
      width:400px;
      display: inline-block;
    }

edited Mar 06 '18 at 05:06

answered Mar 06 '18 at 05:01

Abasaheb Gaware

509
4
13

score 0 · Answer 2 · answered Mar 06 '18 at 05:04

You need to use float:left to your children in order to achieve this

.parent {
  width: 1200px;
  height: 200px;
  background: pink;
}

.child {
  float: left;
  width: 400px;
  display: inline-block;
  background: red;
}

<div class="parent">
  <div class="child">Child1</div>
  <div class="child">Child2</div>
  <div class="child">Child3</div>
</div>

score 0 · Answer 3 · answered Mar 06 '18 at 05:07

inline-block elements (which I'm guessing you are using), by default, have a white space after them, which might cause the issue you are seeing. There are a number of ways to remove this in the html itself, one of them being adding a comment between the two inline-block elements. I prefer this approach, as its more readable.

.parent {
  width: 600px;
  height: 50px;
  background: grey;
}

.child {
  display: inline-block;
  width: 200px;
  height: 50px;
  background: pink;
}

<div class="parent">
  <div class="child">1</div><!--
  --><div class="child">2</div><!--
  --><div class="child">3</div>
</div>

You can also start the divs in the same line, like below, forgoing the comment
<div>content</div><div> content</div

score 0 · Answer 4 · edited Mar 06 '18 at 05:20

Just Give Parent Div Font Size 0px Below is the Code,

You Can Also do the same by float Left But This is the Best Way :)

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Pratice</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
    .contaniner {
        width:1200px; 
        font-size: 0px;
    }
    .threelock {
        background: #000;
        width: 400px;
        height: 400px;
        display: inline-block;
    }
    .yllow {
        background: yellow;
    }
    .red {
        background: red;
    }
</style>

<body>

<div class="contaniner">
    <div class="threelock"></div>
    <div class="threelock red"></div>
    <div class="threelock yllow"></div>
</div>

</body>

</html>

Ismail Farooq · Answer 5 · 2018-03-06T05:17:28.623

There is lots of solution I prefer flexbox

.parent {
  display: flex;
}

.child {
  flex:1 1 400px;
  background-color:red;
  max-width: 400px;
  height: 400px;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

If you really want to use with inline-block either make font-size:0; to the parent or do not change the line while creating children element

.parent{
  width:1200px;
}
.child {
  background-color:red;
  width: 400px;
  height: 400px;
  display: inline-block;
}

<div class="parent">
  <!-- Do Not change line of children-->
  <div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>

please read details https://css-tricks.com/fighting-the-space-between-inline-block-elements/

score 0 · Accepted Answer · answered Mar 06 '18 at 05:13

This happens due to the extra spacing cause by the white space in the code itself. You can fix it by either writing the markup in a way that makes sure there are no white space or you can set the parent div's font-size to 0 so no white space is visible (make sure you then set the children div font's size back to normal)

In this example I've used the first method as it is cleaner

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

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

style

.parent {
  width: 1200px;
  background-color: #333;

  margin: 20px 0; /* outer margin doesn't matter */
}

.parent .child {
  width: 400px;
  height: 300px;
  display: inline-block;
  background-color: #ccc;
}

The first box doesn't work, the second does as I've left no space between the closing and opening tags of the child elements

http://jsbin.com/cifedis/edit?output

I'm marking this as the answer because someone closed my question (very rude). What I'm doing is setting `font-size: initial` on all elements (by using the `*` selector), and then I can set `font-size: 0` on the elements that have nested side-by-side elements. Thanks! — Abraham Brookes, Mar 06 '18 at 23:02

How to fit fixed width elements in a fixed width container?

6 Answers6