My design conundrum involves a 12 column row and trying to make a series of four div blocks stay in a row without stacking as the browser size decreases. Currently, the divs start to stack when the browser gets smaller.
I have 4 divs that should be displayed in a row:
[div1] [div2] [div3] [div4]
But when I resize the browser, it looks like this:
[div1] [div2] [div3]
[div4]
Each of these divs contains an image.
Below is the code snippet:
<div class="row">
<div class="twelve columns center">
<div class="button-container">
<div class="calendar-container left hide-for-small">
<img src="images/poc-calendar.jpg" />
</div>
<div class="search-container left">
<img src="images/poc-button-search.jpg" />
</div>
<div class="submit-container left">
<img src="images/poc-button-submit.jpg" />
</div>
<div class="social-container left hide-for-small">
<img src="images/poc-social.jpg" />
</div>
</div>
</div>
</div>
I've attempted using display: inline and display: inline-block for the individual divs as well as the .button-container.
Here are the latest styles applied:
div.button-container {
margin-top: 18px;
padding-left: 10px;
max-height: 100%;
max-width: 100%;
display: inline-block;
width:100%;
}
div.calendar-container {
margin-right: 10px;
}
div.search-container {
margin-right: 10px;
}
div.submit-container {
margin-right: 10px;
}
div.legend-container {
height: 86px;
}
Any suggestions or solutions would be greatly appreciated! Thank you!