how to align text in div - html

Question

Im trying to display 4 pictures with a title, description and a delete link on it. I cannot get the link to float right in the box I have.
here's the html
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info alignright">Delete</span>
</div>
</div>
</div><!--end container -->
here's the css
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
The html of the picture box gets repeated 3 more times. How can I get the third span link float to the left? Any help would be great.

Answer 1

Adding margin-top: -29px; should achieve this.
DEMO http://jsfiddle.net/4RZJx/1
HTML:
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Delete</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
clear: both;
float:left;
}
.alignright {
float:right;
margin-top: -29px;
}

Answer 2

First of all, where are you using .alignleft in your code provided?
Secondly, the .alignright span has two classes: img-info and alignright. For img-info you have display-block. This is redundant, as the float property will make an element display-block.
All you need to do is add overflow: hidden to your main div (image-container). The float applied to the link makes it act as though it's not in the same "layer". Adding overflow-hidden will fix this problem. Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/

Answer 3

Try this really quick fix, however, you may want to modify the widths and such:
DEMO: http://jsfiddle.net/4RZJx/
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<div class="info-container">
<div class="alignleft">
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete
</span>
</div>
</div>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.info-container{
overflow: hidden;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}

Answer 4

Use text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
float is better used for when you want a image to go to the right, and want text to flow around it etc. As it also cause other layout problems, you might as well try text-align.
http://jsfiddle.net/4RZJx/3/