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
