Align a button at the right side after text which should be aligned to the left

Hello everyone,

I got an issue with a JavaScript / CSS script I’m using.

The goal is simple I have a whole list of images that are in queue for uploading.

Now I wan’t the text to appear at the left (which it already is using an text-align: left; on the div which has the text).

But my javascript “automagicly” adds an “delete” button after each entry. The delete button is now located right after it and should be aligned to the right side of the main div (which is about 600px width).

That way I have a nice overview of my whole queue with everything perfectly aligned.

So…my question is quite simple (for you guys I believe):
How the hell can I get my input button aligned to the right after the text?

If you need any example code of the html i’m currently using let me know, I already figured out that “float: right;” helps alot. But now it’s out of the “row” and if I add a other image to the queue the new delete button appears slightly to the left of the previous delete picture…

I hope you guys can help me out :slight_smile:

Hi daride, welcome to SitePoint! :wave:

I guess you wrap each entry in a container together width the button.

In that case you can use the property overflow on the container to enclose the button and stop it from going up. For IE6 you can trigger hasLayout on the container. Some example:


.container {
    overflow: hidden; /* if hight is not set nothing will be hidden */
    width: 100%; /* any dimension triggers hasLayout in IE */
}
* html .container {
    height: 1%; /* triggers hasLayout in IE without actually defining the height if the parent height is not set */
    overflow: visible; /* IE6 needs visible overflow in order to grow a defined height */
}

Thank you very much for your quick response!
I feel i’m very close now thanks to your code.

However.

Now my site looks like this:
oh great I can’t frakking place the image cause the system whines about a link…great…so you’ll have to look at the code cause I can’t let you see how it looks now

Using this code:

<div style="width: 400px;">
<div id="files_list" style="border: 1px solid black; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: x-small; text-align: left; position: static; left: -1000px;">
<p>
<strong>Images in queue for upload:</strong>
</p>
<div class="container">
ConfiguratieCpanel3.png
<input type="button" value="Delete" style="float: right;"/>
</div>
<div class="container">
DSCF0010.jpg
<input type="button" value="Delete" style="float: right;"/>
</div>
</div>
<script>
</script>
<div id="errornotice" class="error"/>
<br/>
</div>

What am I doing wrong? :slight_smile: