[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 292
  • Last Modified:

How would I pull this effect off?

Head out to http://www.pond5.com/video-sound-effects-music-after-effects-photos-illustrations/1/frisbee.html

It seems like they've got this effect going on where the number of columns automatically expands with however wide your browser is. I've seen that with rows, but not columns.

How are they doing that?
0
brucegust
Asked:
brucegust
  • 5
  • 3
1 Solution
 
Greg AlexanderLead DeveloperCommented:
This is just a css trick, if I am not mistaken, this should work


<style>
div{
	width:100px;
	height:100px;
	border:1px solid;
	float:left;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Open in new window

0
 
brucegustAuthor Commented:
So I'm not using a traditional table, so to speak, correct? I just put my content within the "div" brackets and I'm all set?
0
 
brucegustAuthor Commented:
I just tried it and you're right, but it's not quite there in that when you go to minimize the size of your browser, the content doesn't adjust. With the pond5 site, as you enlarge or minimize the size of your browser the content will shift. You'll have few columns and more rows as you make the screen smaller.

How would you do that?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Greg AlexanderLead DeveloperCommented:
Hmmm. if you just put my example in a page alone, it does adjust... does it for you
0
 
zappafan2k2Commented:
Looking at their site with Firebug confirms that they are using floating divs, as galexander07 said.
0
 
brucegustAuthor Commented:
Yep, you're right! That's exactly what I'm wanting. But how would I do it in the context of a page that has some table elements?

Here's what I've got:

<table width=100% cellspacing="0" cellpadding="0">
<tr>
<td>
&nbsp;<BR>
</td>
</tr>
<tr>
<td bgcolor="white">&nbsp;<BR>
<!-here's where I'm putting my copy and all my music "badges" ->
Welcome to the Texaco Country Showdown download page. Here you’re going to find not only some quality video footage of vintage performances, but you’ll also find some of the best, undiscovered Country Music in the nation.
<P>
Every month a new playlist will be made available. All you need to do is click on the “download” icon that you see displayed on every song that you see below. Pass your mouse over the song to hear it. If you’re interested in hearing other playlists that will be made available in the months to come, click on any of the playlists that you see displayed to the right.&nbsp;<BR>&nbsp;<BR>
<td>
<style>
div{
      width:100px;
      height:100px;
      border:1px solid;
      float:left;
}
</style>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
</td>
</tr>
</table>

This doesn't adjust. What can I do to change it so it will adjust?
0
 
Greg AlexanderLead DeveloperCommented:
> This doesn't adjust.

The divs in your example adjust and the content in your td adjusts... sorry, not exactly sure I guess what you mean by it not adjusting
0
 
brucegustAuthor Commented:
Here's what I've got: http://countryshowdown.com/Texaco/download_campaign/ 

there's something about the way that I've got this laid out that's preventing the effect from happening. I doubt that it has anything to do with your code, but something about the way that I've implemented it that keeps the width "fixed" so it doesn't adjust the way that I need it to.
0
 
brucegustAuthor Commented:
Got it!

Made this change: <td background="images/download_header_02.gif" width=100%>&nbsp;<BR></td> and all was made wonderful!

Thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now