CODEWITHSUNDEEP
htmlcsslayout
WASD42
WASD42

Reputation: 2379

CSS fluid layout: "stacked" div with different heights

I'm trying to figure out if it's possible to create a CSS layout where divs with float: left property would not create a new "row"-like layout but be really fluid.

To be more specific here's what I have now:

enter image description here

All blocks are div with float: left style, certain margins and unfixed height attribute. As you can see every high enough block forms a "line" or "row" with same height. What I'm trying to achieve is -- make all div element obey only their own margin style and not create a row with similar height.

So the question is if it's possible and if yes then how can it be achieved?

HTML (some blocks omitted):

<div id="blocks_wrapper">
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Web</div>
        <div class="d_value"><a href="" rel="nofollow" target="_blank"></a></div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Phone</div>
        <div class="d_value"></div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Thu—Fri</div>
        <div class="d_value">11:00—19:00</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Pricing</div>
        <div class="d_value">40 USD</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Address</div>
        <div class="d_value">0.2km from Historic U.S. 66, Seligman, AZ 86337, USA</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Coordinates</div>
        <div class="d_value">
            35.52890, -113.23200<br>
            N35°31'44", W113°13'55"
        </div>
    </div>
</div>

<div class="clear"></div>
</div>

CSS:

#blocks_wrapper .strblock { float: left; margin-bottom: 3px; overflow: hidden; }
#blocks_wrapper .infobox { width: 19%; padding: 3px; }
#blocks_wrapper .infobox .dElement .d_option { display: inline-block; width: 90px; overflow: hidden; font-weight: bold; }
#blocks_wrapper .infobox .dElement .d_value { display: inline-block; width: 155px; vertical-align: top; }

Upvotes: 0

Views: 608

Answers (1)

Yen Howell
Yen Howell

Reputation: 31

I know it's late, but maybe this will help someone. http://masonry.desandro.com

Upvotes: 2

Related Questions