0

.parent {
  width: 100%;
}

.box {
  width: 33.3%;
  display: inline-block;
}

body {
  margin: 0px;
  padding: 0px;
}
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

now my three divs are not in same line. The div with number 3 goes into new line. Why is that ? I setted the parent to have 100% width, my three divs 33.3% so they should fit inside the 100% width container.

Where is the problem ?

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
user17190872
  • 47
  • 4
  • 3
    In the white space _between_ those inline-block elements, which will get condensed to the width of one space character. And 100% plus two times x is more than 100%, for any x > 0. – CBroe Oct 19 '21 at 11:00
  • it's already asked much time if you do a little google you can solve this issue. – Neeraj Oct 19 '21 at 11:32
  • @CBroe from where are this spaces coming from when i don't set margin ? – user17190872 Oct 21 '21 at 10:12
  • From the whitespace between the tags. Between `` and `
    `, you have a line break, and tabs/spaces.
     – CBroe Oct 21 '21 at 10:17

3 Answers3

0

You should make a flexbox.

.parent {
    display: flex;
    justify-content: space-evenly;
}

.box {
    background: grey;
    border: 2px solid black;
    width: 33.3%;
    display: inline-block;
}

body {
    margin: 0px;
    padding: 0px;
}
<div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

Use display: flex to make your parent container a flexbox. Use justify-content: space-evenly; to allocate space evenly to each object so that they fit next to eachother.

This should do the job :)

dmarinus
  • 161
  • 3
  • 16
-1

The spaces are causing your issue, this article explains why in detail: https://css-tricks.com/fighting-the-space-between-inline-block-elements/. To cure this instantly, simply put your divs on one line:

.parent {
  width: 100%;
}

.box {
  width: 33.3%;
  height: 50px;
  display: inline-block;
  background-color: red;
  text-align:center;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
}
<div class="parent">
  <div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>
mayersdesign
  • 5,062
  • 4
  • 35
  • 47
-1

Yes it's happening due to space between HTML elements as @CBroe said follow this linkcheck here

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
 .parent {
    width: 100%;
}

.box {
    display: inline-block;
    width:33.3%;
}

body {
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
<div class="parent"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
</body>
</html>
Neeraj
  • 749
  • 6
  • 15