Question 227289 in Html Question posted in
Some basic documentation can be found here.

Html – `div` with display mode set to `inline-block` gets forced onto next line despite setting margin to 0

Suppose we have the following HTML and CSS:

* {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30vw;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70vw;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}
<div class="left-column">
</div><div class="right-column"></div>

I am setting the width of the div with class left-column to 30% of the viewport width, and the width of the div with class right-column to 70% of the viewport width. Since I’m using border box sizing, an overall margin of 0 and display mode to inline-block I expect for these boxes to appear adjacent to each other in the inline direction. Strangely, the div with class right-column appears underneath the div with class left-column.

I feel like I am not accounting for some additional horizontal space which somehow gets rendered and forces the right-column onto the next line. What am I missing here?

Tags:

2

Answers


  1. 0

    A scroll bar also takes up space horizontal space.
    Here is an example that hides the scroll bar for webkit based browsers.

    You should see that they align next to each other.
    (i’ve also removed any enters/spaces between the <div> elements, these take up space as well, like @kosh mentioned.)

    ::-webkit-scrollbar {
  display: none;
}

* {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30vw;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70vw;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}
    <div class="left-column">
</div><div class="right-column"></div>

    flex-box

    You might be able to use flex-box to achieve the same without having to worry about scroll bars.

    body {
  display: flex;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.left-column {
  flex: 30 30 auto;
  background-color: rgb(41, 52, 72);
  color: white;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  flex: 70 70 auto;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}
    <div class="left-column">
</div>
<div class="right-column"></div>
    Login or Signup to reply.
  2. 0

    Here you go…

    1. add border-box to all elements and before and after
    2. Use % for width as vw/vh counts full viewport size including scrollbar etc.
    3. set font size to 0
    4. do not add any space, whitespace in between the inline-block elements
    *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}

.left-column {
  display: inline-block;
  background-color: rgb(41, 52, 72);
  color: white;
  width: 30%;
  height: 100vh;
  border: 5px solid red;
}

.right-column {
  display: inline-block;
  width: 70%;
  height: 100vh;
  color: rgb(41, 52, 72);
  border: 5px solid green;
}
.left-column, .right-column {
  font-size: 0px;
}
    <div class="left-column"></div><div class="right-column"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search