Children divs not being sized equally - html

Question

I am trying to display a four grid with different items for my web, however now all children divs have the same size:
<div class="container">
<div class="grid4">
<input type="submit" name="input1" value="input1"/>
</div>
<div class="grid4">
<input type="submit" name="input2" value="input2"/>
</div>
<div class="grid4">
<input type="submit" name="input3" value="input3"/>
</div>
<div class="grid4 no-border">
<input type="submit" name="input4" value="input4"/>
</div>
</div>
CSS:
.container {
width: 100%;
margin: 30px 0 30px 0;
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40,40,40,0.8);
display: inline;
}
.no-border {
border: none;
}
I tested it in jsfiddle and they indeed have the same size:
http://jsfiddle.net/ME7k8/
However, you can clearly see that the last chil div is smaller:
Why?! Any help?
edit In case it is too small in the image:
elemento {
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40, 40, 40, 0.8);
display: inline;
}
div {
text-align: left;
}
body, div, td {
font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
font-size: 12px;
color: #666;
}
Inherited from body
body {
text-align: center;
}
edit I checked again with the browser inspector and I can see that the first div is about 50% of the .container div. It has exactly the same css properties than the rest of the divs.

Answer 1

The 3 first divs are wider than the last due to:
1. They have the CSS display:inline (meaning their width gets effected by white-spaces, line breaks etc).
2. The last div has no border unlike the first 3.
Give them identical width
So what you need to do to make sure all 4 divs have the same width is removing all white-space between the submit buttons and their parent divs, and also add padding-right:22px; to the last div (if you want the 4 divs exactly identical wide).
jsFiddle demo.

Answer 2

I use your jdFiddle and put a blue background to see the difference, all divs have the same size, however, I declare a size for the container
.container {
width: 1200px;
background-color: tomato;
}
and re adjust the size of the divs with the grid4 attribute
.grid4 {
display: block;
float: left;
width: 20%;
padding: 2.3%;
border-right: 0.2% solid rgba(40,40,40,0.8);
display: inline;
background-color: blue;
}
when you put padding to each one (20px) that pixels are added to the "25%" of total size.. so this make it a bigger element, and probably that's the difference you couldn't see... with that on mind, may be you could solve your problem... Check This...

Answer 3

Your last element has no border, while the others probably do.
Borders take up space, as do margin and padding.
Check out the box model by pressing ctrl + shift + i in your browser and hovering over an Also,
http://www.w3schools.com/css/css_boxmodel.asp
From inside to outside, there is padding, borderin, margin, outline.
The first three add size to your "box model". Outline does not.
If you specify a width or height, any padding, border, or margin will make your element not that specified width or height anymore. Needless to say, this makes for all kinds of headaches
One solution around this is to use box-sizing: border-box;
This makes specified padding and border actually be your specified width or height. Margin will still add to the dimension, which makes sense if you think about it.
http://css-tricks.com/box-sizing/
Also be sure to take care of prefixes so that it works on all browsers.
You may not want to deal with this at this point, but check out the example in the last link, as well as caniuse.com.
If you don't want to handle cross browser support manually, there is a library to automatically post-process your CSS to add the appropriate prefixes. This uses the caniuse.com database so as long as you update this library, your post-processed css file will have the up to date prefixes without you having to worry about keeping up with browser versions or individual css feature deprecations.
https://github.com/ai/autoprefixer
article on auto prefixing
http://css-tricks.com/autoprefixer/