CSS: inline-block not on the same line as float with boxsize

I was experimenting with using boxsize and inline-block vs float. I am stumped as to why I get different results for the following:

Codepen - float

Codepen - Inline-block

More specifically - why does the inline-block wrap? If I use Chrome's developer tool it reports both "left" and "right" divs as 240 pixels wide.

Thanks

Answers


inline-block elements flow just like text does, so the newline character between the two divs is rendered as a space character, which makes the total width (left div + space + right div) greater than 100%.

The below example will behave as expected even with inline-block.

<html>
<body>
<div class="container">
<div class="boxsize">Left</div><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

Another method is to use comments to remove the whitespace, which can help with indentation.

<html>
<body>
<div class="container">
<div class="boxsize">Left</div><!--
--><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

Need Your Help

Parent Took Precedence Over Child on DIV Click Event

javascript jquery click

I have a div and within the div there is a child img element.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.