Simple way of using the full browser available width (CSS Responsive Design) - html

Question

3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:

Answer 1

Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this

Answer 2

I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box

Answer 3

display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}