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?
>Solution :
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>