Imma Dummy :v

Question

I've just started learning and experimenting with HTML and CSS (on way to learn JavaScript!! yay! ヽ(*≧ω≦)ﾉ). I was trying to place two float divs at the side of each other, taking each 50% of the page. In the css I wrote:
float: right/left;
border: thin solid black;
width: 50%;
I just spent a hole 90mins trying to see why the dibs never aligned each other, not realizing that the thin border ads another 1px to the dib-box. I erased the border value. And it was fixed.... I am a dummy 😂😂

Answer 1

hehe, don't worry, keep experimenting 👍 good thing you were able to solve it 😊
This happens because the default value of the width and height properties of browsers is set to content-box.

So another way to solve this issue is by using the CSS box-sizing property. With it you can tell the browser that the sizing properties (width and height) should include the border-box. Like this:

div {
border: 1px solid;
box-sizing: border-box;
}

With that code you're specifying that all <div> elements should have border (and also padding) included in the element's total width and height 😊

Answer 2

No,Test everything is like "self-teaching"
You are not "dummy"

Answer 3

You is smart. Figured it out all by yourself

Answer 4

:v!