ansaurus

Question

Answer 1

A:

That javascript file is actually part of this theme:

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>

See what I mean? :)

Salty 2009-01-06 00:21:57

-1: Floated elements without explicit widths are evil.

Triptych 2009-01-06 00:24:07

Point taken. I know that already, but I guess I should have mentioned that, just in case someone reading it doesn't learn that as well. :P

Salty 2009-01-06 01:04:41

Answer 2

A:

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: .myClass { float:left; width:350px; }

my content more content even more content

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.

JoshBerke 2009-01-06 00:39:34

The problem with that is if you have different heights for each post there are gaps left when you go to the next row.. where as it is all filled in with this example: http://typeneu.com

2009-01-06 00:48:35

but thanks for the reply

2009-01-06 00:49:46

Answer 3

A:

thanks for the reply. the problem with css is that if there is a longer column on the left the space below the right column is not filled by the next post. you can see if you scroll down a bit on my blog: http://www.joehamilton.info/00parked/sales/ (under construction)

I saw the grid-a-licious theme but have not been able to take the javascript from that theme and get it to work in my theme.

2009-01-06 00:41:12

hmmm ohhh I see so yep ok this is an interesting challenge if I find something I'll be back

JoshBerke 2009-01-06 00:49:31

Answer 4

A:

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>
 <div class="footer" >FOOTER</div>
 </body>
 </html>

Simple, works, right?

Alex 2009-01-06 02:21:04

Thnks for the rply Alex. I would like the number of columns to be flexible with the screen res so that would not work. I think I will have to try adapting the javascript inc with the theme: http://suprb.com/grid-a-licious/Thanks again and any more suggestions for doing this via css appreciated!

2009-01-06 07:30:36

ansaurus

tags:

views:

answers:

Floating columns both ways Javascript

Edit

related questions