Menu
I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have float: left). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). JSFiddle here.
CSS snippet:
.clickable {
border: 1px dotted black;
width: 200px;
float: left;
height:50px;
margin-right:20px;
margin-bottom:20px;
}
HTML snippet:
<html>
<head><title>Layout test</title></head>
<body>
<div class="clickable"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet.
653
Change your float: left to display: inline-block. That's the only change I made to your fiddle, and seems to give the effect you're looking for.
http://jsfiddle.net/GLf7m/2/
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
