CODEWITHSUNDEEP
csshtmlpositionresponsive-design
mcranston18
mcranston18

Reputation: 4800

CSS Positioning DIVs to be fluid & responsive

I'm having a problem using CSS to properly position DIVs. Any help would be incredibly appreciated!

The problem: http://teamcoding.ca/leisure/specialevent/ On the site, I want the "event" div to stack on top of each responsively regardless of height, like is done using this site: http://themify.me/demo/#theme=grido The way my site is rendered, the DIV with the most height pushes all the other DIVs down. For instance, if you expand it to have three-columns, div #5 should be below div #1.

JS Fiddle: http://jsfiddle.net/QQFpD/4/ Here is my code. I thought it would easier to post it on JsFiddle rather than in the msg box. (Please let me know if I should be posting my code here as well.)

Upvotes: 1

Views: 14211

Answers (2)

David Barker
David Barker

Reputation: 14620

Your problem is as was pointed out above the nature of floats. You need to re-think how you are positioning the events in terms of columns. A good way to handle this and keep the layout fluid using floats would be to create a grid such as this, the only downside being a bit of extra non semantic code:

/* __row
 * A row of columns, we define total page width here */
.row        {width:960px; height:100%; margin: 0 auto; position:relative;}

/* __grid 
 * Master Grid Layout elements */

.col1, .col2, .col3, .col4, .col5, .col6 {
    position:relative;
    height:100%;
    float:left;
    margin-left: 2%;
}

Working with percentages allows us to change the overall width with .row and expand our columns to fit.

.col1       {width: 15%;}
.col2       {width: 32%;}
.col3       {width: 49%;}
.col4       {width: 66%;}
.col5       {width: 83%;}
.col6       {width: 100%; margin-left:0;}
.colFirst   {margin-left:0;}
.colClear   {clear:both;}

Using it to create a 3 column fluid layout:

<div class="row"> 
    <div class="col2 colFirst">
        <ul>
             <li>1st item</li>
             <li>2nd item</li>
        </ul>
    </div>
    <div class="col2">... second column div's / data</div>
    <div class="col2">... third column div's / data</div>
    <div class="colClear></div>
</div>

This way you're data would all fall into columns and would flow seemlessly down the page giving the exact way you want it viewed, and in pure CSS.

Upvotes: 1

mtf
mtf

Reputation: 101

It's the nature of floats. The example page (themify) also jumbles the elements (the nature of float), but is somehow able to close the gaps. On closer inspection we can see there is some dynamic interplay between browser and window width adjustment, as the DOM is updated to new position absolute, top values. Your solution must be in the jQuery, not the static CSS.

Upvotes: 2

Related Questions