Geek Answers Handbook

How to make two divs from the total width of 100% on the screen

here is the violin

I want the two divs side by side to occupy the entire width of the window. I use display:inline-blockfor them to behave horizontally.

<div id="left" class="horizontal">hello</div>
<div id="right" class="horizontal">world</div>

The problem is that when I set their width to 100% (20% on the left and 80% on the right), they occupy a larger screen and the div on the right falls under another.

I will get around this by setting the width to less than 100% (19% and 79%), but later this has some minor issues, sometimes putting unnecessary spaces where I don't want to.

What am I missing so that my divs go horizontally using 100% of the screen?

I have seen the tricks listed here as well as this question ... and most of them are so ugly, I still prefer to use a width of less than 100%.

* {
    padding:0;
    margin:0;
    border:0;
    border-spacing:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html {
    height:100%;
}
body {
    height:100%;
}
#left {
    background-color: red;
    width:20%;
    height:100%;
}
#right {
    background-color: green;
    width:80%;
    height:100%;
}
.horizontal {
    display: inline-block;
}
+4
source share
2 answers

If you do not have to use inline-block, I would recommend using instead block. blockis the default value for displayfor div, so you do not need to set it explicitly. Just set floatto left, and you won’t have to “fight the space between the built-in block elements”.

Example:

.horizontal {
  float: left;
}
+4
source

More articles:


All Articles