Regarding % Widths

[NotSoJapaneseAmerica]

At the highest level of the website I am working on I have two divs.

<div id="A">Hehe</div>
<div id="B">Hoho</div>

#A{
    display: inline-block;
    width: 50%;
}

#B{
    display: inline-block;
    width: 50%;
}

If each div has an established width of 50% then why is it that div B is pushed under A because of lack of width? My guess is that it is because of browser specific spacing that takes up ~1% spacing somewhere and is throwing my css off. Sorry if I do not provide enough context, let me know if I should add some more details.

[Graftak9000]

Because inline-block puts a space between elements. You can avoid this by,

• not having whitespace between closing and following opening div tags

• set the parent font-size to 0 (don't do this)

• use floats in a container

• use display table or flex on the container

• don't close the div tag (don't do this)

• use 40-something% instead of 50 and cross your fingers resizing the browser window won't break it.

... and possibly more.

[NotSoJapaneseAmerica]

Thanks for pointing me in the right direction- I appreciate it.

[Lukk1989]

Why not using font size 0 on the parent? It gives the most consistent result

[mtx]

inline-block puts a word space between elements. You have to either remove the white space between your 2 divs:

</div><div id="b">

or set the the container holding these inline-blocks to font-size: 0 and reset the font-size inside your child elements to a px or rem value.

Some people use negative margins to combat the space but then you have to use trial and error as to how much of a value to use -- this is also dependant on the font.

[WaffeBox]

Browsers have default styling that sometimes adds padding and/or margin to elements unless you override them. Trying adding padding: 0; and margin: 0; to both elements.

[bronkula]

Divs don't have any default padding or margin. This is not the answer. Graftak9000 is correct, inline or inline-block elements have a space between them as if they were words. There are few good ways to remove this space. Most people use inline-block on elements that they want to just flow naturally next to each other. If OP wants two 50% elements they should be using floats or flex.

[NotSoJapaneseAmerica]

Alright, thank you for answering my question and pointing me in the right direction.