how to align text in div

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"><a href="#">Delete</a></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"><a href="#">Delete</a></span>
            </div>
            <span class="img-info alignright"><a href="#">Delete</a></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"><a href="#">Delete</a></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"><a href="#">Delete</a></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"><a href="#">Delete</a></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

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/

Answer 3

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 4

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"><a href="#">Delete</a>
             </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;
   }