No we don’t want to rely on guesswork or some method that will break later 
Read Ray’s posts for the full proof and correct way to do this.
4 Likes
It’s what I tried to convey, Paul. Perhaps not clearly enough.
1 Like
Ray,
That suggestion of: box-sizing: border-box;
does take care off the problem. As now the DIVs with width 50% are ligned next to each other fine.
Thanks.
But you know this really points out an error or type error in CSS, since what:
box-sizing: border-box;
does is: “Include padding and border in the element’s total width and height”
However, as noted before these DIVs have border Zero and Padding is again an internal element.
Padding is, indeed, inside any border on the element, but unless you use box-sizing: border-box;, padding will be calculated in addition to the declared width.
2 Likes
Techno,
Yes, that is my point. That this is really a flaw or error in CSS.
That yes indeed to overcome this flaw we need to include: box-sizing: border-box;
but that should not be required if this flaw of CSS was not there or was addressed, since again Padding is an internal element and should not affect the width of the DIV.
What is the flaw?
You have two choices.
Use the box-sizing:border-box model or use the default box-sizing:content-box model. No flaw just choices as required.
How can it be a flaw when you have the tools to do it either way that you want? Some people prefer one method and others prefer the other.
The only flaw is in your thinking that a dimension refers to the whole box rather than the ‘content’ box. The default box-model treats your dimension as the size that is allowable for any content to fit inside. That means that padding and borders are outside the content. The ‘box’ is actually the size of the content + padding + borders.
I would have preferred the border-box model to be the default but probably 50% of developers prefer it as it is. It’s a simple matter of changing to the box model you want for the job in hand.
4 Likes
If you set the dimensions of an image to, say, 300px by 400px, then added 20px padding and a 5px border, would you really expect the size of your image to be reduced by 50px to accommodate the padding and border, or would you expect the padding to be in addition to the size of the image? Reducing the image to 250px by 350px would alter the aspect ratio, so it makes sense for the declared dimensions to be for the content, and padding to be in addition. That is the standard CSS box model.
box-sizing: border-box; just provides an extra tool which allows you to use whichever model best suits your purposes.
5 Likes
CSS is an evolving series of levels and revisions.
CSS 2.1did not include the box-sizing property, the box dimensions were based on content box only and we had to figure our padding in with the width. That was doable with with rigid pixel dimensions but posed a problem with percentages.
For the sake of backwards compatibility the box-sizing property was introduced in CSS3 with the Box Model addition
Old sites continue to work and now you have the option of using this new convenient box-sizing property to do all the math for you, and it works with percentage size boxes too.
Modern bullet trains evolved from steam powered trains.
4 Likes
Please explain those various reasons.
I see you now have four inline-blocks tag chained in your html.
<div class="w3-animate-left page_left" style="font-size: 20px;">
<div id="top_area_l">Box 1 </div><div id="top_area_r">Box 2</div><div id="top_area_l">Box 3</div><div id="top_area_r">Box 4</div>
</div>
Your well on your way to making a bigger mess, just wait until you get some real content in there. Then reduce your viewport width and things Will be spilling out. Not everyone will be viewing your site on a widescreen monitor.
You can change those 25% widths to 50% with media queries and let them wrap and stack for smaller screens.
Though flexbox could take care of that for you.
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.