I have a div that uses a border-image. The border width is 33px but the image doesn't fill the total width and has transparency.
I want to have a background color that would fill exactly the inside of my border.
Here is the code I came with:
http://jsfiddle.net/kvo8zyr7/1/
.content {
width: 500px;
height: 500px;
border: 33px solid;
border-image: image-url("interface/global/popup_border.png") 33 stretch;
margin: 0 auto;}
.sub-content {
position: relative;
left: -33px;
top: -33px;
width: 500px;
height: 500px;
border-left: 15px solid rgba(0,0,0,0);
border-top: 14px solid rgba(0,0,0,0);
border-right: 15px solid rgba(0,0,0,0);
border-bottom: 14px solid rgba(0,0,0,0);
background-color: #e4e2d7;
background-clip: padding-box;
z-index: -1;}
The problem is that all elements I have in my sub-content div are unclickable because the layer is behind...
Any ideas to whether:
Make the elements clickable
Have the same visual result with a different solution than mine that wouldn't make the elements unclickable?
Thanks in advance for your help.
Try this
.content {
width: 500px;
height: 500px;
border-width: 33px;
border-style: solid;
-webkit-border-image:url("http://i.imgur.com/SVFLQko.png") 30 30 round; /* Safari 3.1-5 */
-o-border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round; /* Opera 11-12.1 */
border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round;
margin: 0 auto;
}
In reply to your comment I corrected the jsfiddle and here's another solution jsfiddle which works better by just switching the content div inside the sub-content with adjusting the positions and removing z-index and after some search on z-index it seems the nested div you have is the problem as it will not be possible this way.
Some references to understand this:
1) Please read this About z-index for child and parent
2) And this Image frame border and z-index
Related
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I am working on my code to create a green circle with your name on it with an arrow and border just like the one that google use.
please find the sample image below.
I have already created a green circle and a name using css and html which you can see it here.
<div class="profileImage">
<span id="profilename" class="profilename"></span>
<div class="flex-container">
</div>
</div>
.profileImage {
-webkit-background-size: 32px 32px;
background-size: 32px 32px;
background-color: green;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
float: right;
margin-right: 18px;
margin-top: 12px;
overflow: hidden;
position: relative;
height: 32px;
width: 32px;
z-index: 0;
}
.profilename {
text-align: center;
color: white;
font-size: 14px;
line-height: 32px;
margin-left: 5px;
font-weight: bold;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
$(document).ready(function() {
var firstName = 'Robert';
var lastName = 'Jones';
var intials = firstName.charAt(0)+""+lastName.charAt(0);
document.getElementById("profilename").innerHTML = intials;
});
When I click on a green circle, I want to display the overlay with a border but I have got no idea how to do this. I tried to find it on google but I couldn't find it.
Can you please show me an example how I can display the overlay with a grey border that come with my first name, last name, email address and a signout button?
Thank you.
Ok I'll get you started with an overlay that includes an arrow with a border around the whole thing.
Basically, you're doing a bit of "visual miss direction". We used CSS borders to generate a triangle of the SAME color as the box background. This gets positioned its (height - border width) above the box. This puts the triangle OVER the top of the border, effectively hiding it.
Then there's a second triangle with a color that matches the border of the box. We position this triangle BEHIND the first triangle (using z-index) and offset the second triangle the border width from the first. This makes for a "fake" border because only the border width of the second triangle shows.
body {
margin: 50px;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
// styling
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
top: -9px;
right: 10px;
}
.arrow:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
left:-10px;
top:-1px;
z-index:-1;
}
<div class="overlay">
<div class="arrow"></div>
<div class="overlayContent">
</div>
</div>
We used two elements (arrow and content) inside the overlay wrapper because we're rounding the corners using overflow:hidden this would cause our arrows to be cut off as well. So instead we'll have an extra container. The content area uses flexbox to push the button bar to the bottom regardless of the size. There are other ways to do this but this is easy.
body {
margin: 50px;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
// styling
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
top: -9px;
right: 10px;
}
.arrow:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
left:-10px;
top:-1px;
z-index:-1;
}
.overlayContent {
position:absolute;
z-index: 1;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
border-radius: 4px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.top {
flex-basis: 70%;
}
.bottom {
flex-basis: 30%;
border-top: 1px solid #ccc;
background-color: #f5f5f5;
}
<div class="overlay">
<div class="arrow"></div>
<div class="overlayContent">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
That's the fundamentals of the overlay. Try filling in the content you want and ask more questions if you need help.
Is it possible to modify selectize.js? Instead of having a dropdown it will open a modal box for its options ? I am thinking of having a onfocus event then it will open that modal but prevent the dropdown. I'm just not sure how I can achieve it. and How I can populate the selectize once the modal options have been saved
It's usually not a good idea to customize a code library because you will not be able to upgrade to the next version. You are better off rolling your own solution using js and css. Actually making modal boxes is not that difficult, you just need to float a div at a higher z-index than the rest of the page, then put a transparent layer behind it to keep the user from clicking through to the background page. Here is some sample css and html I use to float a modal.
css
.BDT_Dialog_Layer {
position: absolute;
display: table;
top: 0px;
left: 0px;
height: 99%;
width: 99%;
}
.BDT_Dialog_Center {
position:fixed;
top:30%;
width:100%;
}
.BDT_Dialog_Decoration {
position:relative;
margin:0 auto;
text-align: center;
background-color: #ffffff;
display: table;
/* -- background-color: #DDDDDD;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF' , endColorstr='#BBBBBB');
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(1, #BBBBBB) );
background-image: -moz-linear-gradient( center top, #FFFFFF 10%, #BBBBBB 100% ); -- */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-webkit-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-khtml-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
}
html
<div id="dialogLayer" class="BDT_Dialog_Layer">
<div class="BDT_Dialog_Center">
<div class="BDT_Dialog_Decoration">
My stuff
</div>
</div>
here is the blocking layer css
div.BlockInteractionWithPage {
position: absolute;
top: 0px;
left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #ffffff;
opacity: 0.0;
filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */
height: 100%;
width: 100%;
}
I've thought about this problem quite a bit.
Is there are way, say, to automatically insert a line decoration after each line (row) in a <div> or just any element that holds text?
For example:
This is the first line
This is the second line
I noticed this problem because underlines aren't ideal, and inserting a div or separating chunks of text in different divs is awkward. Because different characters have different widths in typography, If I used underscores the two lines become uneven in terms of width. I don't think tables can automatically separate a block of text in two rows. Not without some JQuery doing the split.
Is there something that will let define line decorations after lines ?
I need this because the text in the divs are coming from a database. I don't know the length of each line and so it's awkward If I assume a fixed number of characters per line and start chopping words in half at the end of lines,
like,
Hello World Wha
t is up.
Thanks!
Perhaps you can fake it with a "lined paper" effect. Here is one such result: http://css3.wikidot.com/blog:lined-paper-with-css
I'll copy it here to preserve it in case the original site moves or goes down.
The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.
.paper {
font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
width: 300px;
margin: 0 auto 10px;
padding: 6px 5px 4px 42px;
position: relative;
color: #444;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
In order to get all the text to line up properly on the lines, you need to specifically declare margins and line heights for all text elements. Given we used a background size of 20px above (i.e. it's 20px between the lines), we need to use a line height (or an equivalent line height + margin) of 20px.
.paper h1,
.paper h2 {
font-size: 16px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h3,
.paper h4,
.paper h5 {
font-size: 14px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h4,
.paper h5 {
font-weight: normal;
}
.paper p {margin: 0 0 20px;}
.paper p:last-child {margin: 0;}
.paper ul {margin: 0 0 20px;}
Browser support
It works perfectly in Webkit and Opera, and almost perfectly in Firefox (the ruled margins on the left are 1 pixel too short at one end). Theoretically it should work in IE10, but I haven't tested it.
Another way would be to just create an 1xN.png with 1 pixel filled in at the bottom. and set that as your background-image. Where N equals the line height like below:
<--- Just a speck.
You could also convert the image into a data URI if you are worried about adding an extra request.
CSS
div {
background-image: url("1x16.png");
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAYAAADXnxW3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAABlJREFUeNpi+P//PwMTAwMD5QQDAwPDf8AA7wsEGVDzcpsAAAAASUVORK5CYII=);
line-height: 16px;
}
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.