Floating columns both ways in JavaScript

StackOverflow https://stackoverflow.com/questions/415018

  •  03-07-2019
  •  | 
  •  

Question

I am trying to float columns using CSS so they stack up evenly like on this blog: http://typeneu.com

It seems to be impossible using CSS so I am looking into JavaScript.

The website listed above uses this JavaScript file: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js

I have tried to implement it to experiment but it doesn't seem to be working.

Any links to tutorials on this subject or suggestions for getting it to work with JavaScript or CSS?

Edit: I would like the number of columns to be flexible with the screen resolution.

No correct solution

OTHER TIPS

I have a site which basically has DIV's float left with a set pixel width. Depending on the resolution and window size I might have 1-n columns, You should be able to basically:

<style>
.myClass
{
float:left;
width:350px;
}
</style>

<div class="myClass>my content</div>
<div class="myClass>more  content</div>
<div class="myClass>even more content</div>

To get a fixed number of columns I'd assume you can calculate the width using javascript or perhaps there is some other trick.

Edit

Ok looking at their JS file you need to make sure you match up your class and id's to match what they are expecting Looks like all your posts need to be ina div with an id of allposts.

Check out the HTML of the site you typenu site you referenced and get your html to match theirs.

Keep it simple. This should make a nice page... the css should include this:

.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}

.first    { width: 100px; left:10px;}
.second   { width: 100px; left:110px;}
.third    { width: 100px; left:220px;}
.fourth   { width: 100px; left:330px;}

.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/

and some html (inside the body, after you have called the css):

<body>
    <div class="header">TITLE</div>
    <div class="bod clear">
        <div class="first tall"> Lorem ipsum </div> 
        <div class="second"> Lorem ipsum </div> 
        <div class="third"> Lorem ipsum </div> 
        <div class="fourth"> Lorem ipsum </div>
    </div>
    <div class="footer" >FOOTER</div>
</body>
</html>

Simple, works, right?

After placing first component on the page, take dimensions of that, then place next components one by one on the UI using absolute placing.

That JavaScript file is actually part of this plugin:

http://suprb.com/apps/gridalicious/

It's not that hard to do in CSS, however. You just need to use floats.

For example:

<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>

Is it clear enough?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top