Google Polymer: how to properly put divs inside paper-material element? - html

Question

Here is my code:
.block {
width: 25%;
float: left;
}
<paper-material elevation="1">
<p>List of blocks:</p>
<div class="block">
<p>Block 1</p>
</div>
<div class="block">
<p>Block 2</p>
</div>
<div class="block">
<p>Block 3</p>
</div>
<div class="block">
<p>Block 4</p>
</div>
</paper-material>
Paper-material element contains only "List of blocks" label, all four divs are outside. How can I fix it so that the divs are inside the paper-material element?
Thank you.

Answer 1

Import iron-flex-layout and add #apply --layout-horiztonal; to your CSS, which currently amounts to
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

Answer 2

You have to add div at the end of all .block divs and set style clear: both
inside style:
.block {
width: 25%;
float: left;
}
.clear {
clear: both;
}
and paper-material:
<paper-material elevation="1">
<p>List of blocks:</p>
<div class="block">
<p>Block 1</p>
</div>
<div class="block">
<p>Block 2</p>
</div>
<div class="block">
<p>Block 3</p>
</div>
<div class="block">
<p>Block 4</p>
</div>
<div class="clear"></div>
</paper-material>
but this is still not the best solution. Since your paper-material should have fixed width. At this moment it is better to use display: flex . Be aware that older IE doesn't support flex. So if you really want to support that 1% of people then you can continue using float:left.. but i still think using display: inline-block would be much more better.