Clear inline-blocks without using an empty div.clear between them? - css

Question

I understand that the older technique for a situation like this would be to just put a blank in between the two elements that I want to separate, but how would I do this in a more elegant and semantic way?
https://codepen.io/sharpdesigner/pen/oywgeo
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>

Answer 1

You can do this using flex
.block-container {
max-width: 1250px;
margin: 30px auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body {
font-family: arial;
text-align: center;
}
.block-container {
max-width: 1250px;
margin: 30px auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.block-1 {
border: 1px solid #ccc;
width: 500px;
padding: 20px;
display: inline-block;
margin-bottom: 20px;
}
.block-2 {
border: 1px solid #ccc;
width: 200px;
padding: 20px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title="">a.block-1</a>
<a class="block-2" href="" title="">a.block-2</a>
</div>
2nd Answer
Make the block2 element display: block
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: 200px;
padding: 20px;
margin: 0 auto 30px;
display: block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>

Answer 2

If I understood the issue correctly, Just try to put this CSS declaration on the parent container:
white-space: pre-line;
With this approach you avoid to transform the inline-block elements to a block elements.
pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
white-space: pre-line;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>

Answer 3

I'm not sure i understood the questions correctly, but I suggest looking into CSS grid if it's applicable. I've altered your code pen just slightly to show what this would look like. You can display the elements vertically after specifying that you'd only like one column, in my example I've set the width of the column to auto using the grid-template-column attribute.
.block-container {
text-align: center;
margin: 30px auto;
display:grid;
/*by specifying that there is only one column, this should create vertical alignment.*/
grid-template-column: auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}