Unable to display download button to the right inside a div

Question

Here is my html

<div id="under_post"> <!--START UNDER POST-->
            <div id="post_info"> <!--START POST INFO-->
                    <p><span style="color: #000000;display: block;float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus sit amet quam gravida fermentum non a nibh. Praesent quam libero, dignissim vel luctus vel, sodales in justo</span></p>
            </div> <!--END POST INFO-->

            <div id="download_button"><!--START DOWNLOAD BUTTON -->
                        <a class="download" href="http://dl.dropbox.com/s/0iq6ik93rklbakh/Kirvy.zip">Download</a>            
            </div> <!--END DOWNLOAD BUTTON-->


 </div>

css is as follows

#under_post {
    margin: 0;
    padding: 0;
    width: 600px;
    border: 1px solid black;
}
#post_info {
    margin: 0;
    padding: 0;
    width: 400px;
}
div#download_button {
    width: 100px;
}
div#download_button a.download {
    display: block;
    text-decoration: none;
    color: white;
    padding-top: 10px;
    background-color: #e8432d;
    width: 100px;
    height: 30px;
    text-align: center;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -khtml-border-radius: 7px;
}

I want the download button to be aligned to right side under the #under_post div

Here's the link to the page I'm trying to get it to work on.

Link

Thanks in advance

Answer 1

Add float:left; to #under_post and #post_info

#under_post {
margin: 0;
padding: 0;
width: 600px;
border: 1px solid black;
float: left;
}

#post_info {
margin: 0;
padding: 0;
width: 400px;
float: left;
}

and add float:right;margin-top:25px; to div#download_button

div#download_button {
width: 100px;
float: right;
margin-top: 25px;
}

This is how it looks