Question

HTML:

<section id="minibox"><h3>Shop</h3><i>The store module. Manage your products, payment methods and more.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>

<section id="minibox"><h3>Comments</h3><i>The comment module. Allows comments on pages you choose.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>

<section id="minibox"><h3>Other</h3><i>The store module. Manage your products, payment methods and more.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>

<section id="minibox"><h3>Other</h3><i>Test module for layout testing purposes, more text to make the box larger to see how it handles it.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>

<section id="minibox"><h3>Other</h3><i>Test module for layout testing purposes, more text to make the box larger to see how it handles it.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>

CSS:

#minibox {
width: 18%;
margin: 10px 1%;
padding: 10px;
display: inline-block;
background: #EEE;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height:142px;
}

When one of the boxes has less text than the others it wasn’t displaying inline, so I tried adding min-height / height thinking it would fix it. It makes all the box sizes coincide but it still knocks the one with less text down a line. Is there any way I can fix this without just adding an empty line?

Thanks

Answer 1

Add vertical-align: top to your CSS. On a side note, consider using a class instead of an id for recurring styles.