Floating boxes with equal heights
Posted on | April 15, 2009 | No Comments
From: http://www.cssnewbie.com/example/equal-heights/plugin.html :
"After I wrote and published my last article on writing a function to equalize heights in jQuery,I realized that the function would probably make a really useful jQuery plugin. This is that plugin.
This is also my first attempt at a jQuery plugin, so I apologize in advance if I’ve done something painfully stupid (and painfully obvious) to any and all plugin veterans out there. Luckily, the functionality is extremely simple."
Go to the authors homepage for further reading.
Check out my version of his demo here:
Hjem og atter hjem
Boks nr 1
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
I min blog skal det skrives hundretusen ord
Boks nr 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
I stua ligger en hund og snorker hardt
Boks nr 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Katta spiller på taket
Boks nr 4
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam
Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
I min blog skal det skrives hundretusen ord
Boks nr 5
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
I stua ligger en hund og snorker hardt
Boks nr 6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
CSS for the demo:
#container {
position: relative;
overflow: hidden;
display: block;
clear: both;
width: 100%;
}
#container .block {
padding: 5px;
margin: 5px;
background: #ebebeb;
border: 1px solid #bbb;
position: relative;
float: left;
width: 210px; /* 25% */
text-align: left;
}
#container .block p {
margin-bottom: 5px;
}
#container .block i {
font-size: 80%;
}
#container .block h3 {
margin: 0 0 5px 0;
letter-spacing: -1px;
position: relative;
z-index: 10;
color: #534c45;
line-height: 1.2;
}
jQuery javascript for the demo:
- jquery-1.2.5.js"
- jquery.equalheights.js
No related posts.
Comments
Leave a Reply
Categories
smashingmagazine.com
- How To Use Custom Post Types To Organize Online Marketing Campaigns 03/02/2012
- Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons) 02/02/2012
- Ten Things To Think About When Designing Your iPad App 31/01/2012
- Desktop Wallpaper Calendar: February 2012 31/01/2012
- The Future Of Screen Typography Is In Your Hands 30/01/2012
- Limiting The Visibility Of WordPress Posts Via Usernames 27/01/2012
- The UX Research Plan That Stakeholders Love 26/01/2012
- How To Deliver Exceptional Client Service 25/01/2012
- What Successful Products Teach Us About Web Design 24/01/2012
- Introduction To Linux Commands 23/01/2012
