On the first picture, there are six equal divs displayed. As the screen size increases, the width of the divs also grows to fill up their space, like a table cell or another div. If there is enough space in the first row to accommodate the fourth div, it shifts there (as shown in the second picture). After this adjustment, the divs return to their initial width (as seen in the first picture). In the second row, it is necessary for two divs to be centered.
Is it possible to achieve this task using only HTML+CSS? Or does it require JavaScript as well? How can this be done? Thank you for any assistance.
First picture:
* * * * * * * * * * * *
* * * * * *
* * * * * *
* * * * * * * * * * * *
* * * * * * * * * * * *
* * * * * *
* * * * * *
* * * * * * * * * * * *
Second picture:
* * * * * * * * * * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * * * * * * * * * *
* * * * * * * *
* * * *
* * * *
* * * * * * * *
index.html
<link rel="stylesheet" type="text/css" href="style.css">
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
<div class="floating-div">Float 4</div>
<div class="floating-div">Float 5</div>
<div class="floating-div">Float 6</div>
</div>
</div>
</div>
style.css
.clearfix { width: 30%; height: 100px; border: 1px solid}
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; margin: 10px; border: 1px solid red; }
Adjust the browser zoom setting to see the effect. The desired outcome may not be visible immediately. http://jsfiddle.net/TYK3J/4/