[Solved] inline-block instead of float not aligning correctly for 100vw width

[punjab]

For this simple layout using inline-block instead of float, and using vw instead of px, I’m not able to float the #content div correctly.

http://jsfiddle.net/punjcoder/4ZxBM/

Although I have set padding and margin as zero, unless I reduce the combined size of #navbar and #content to 99vw or less, the #content wraps to the line below? Not knowing where that 1px goes would be a hackish solution, and I might use floats instead.

Thank you for your help in advance. I have been trying to dig it for an hour without success.

Solution: It seems stupid, but one has to add
font-size: 0;
letter-spacing: 0;
word-spacing: 0;
<code></code>
to the container div – body in this case to resolve this. Then in the div redeclare the font sizes. This seems no better a hack then using floats. Maybe I should stick to the floats.

[chrisburton]

That Pen seems invalid.

[punjab]

Hi Chris,

Thanks for pointing that out. I don’t know why it was showing that. Updated the post with a jsfiddle link. Thanks

[chrisburton]

@punjab font-size: 0; should do the trick or use <!--ELEMENT-->

[Author]

Posts