CSS help please, 2 objects refuse to remain on same line.

Question

Hi,

I'm sorry for being a css noob and would appreciate someone to guide me in the right direction.

Webpage i need help with can be found at http://filefx.com

When you hit the page, you will notice that the "Select Files" icon and "Upload Files" icon are not on the same line.

The "Select Files" icon is actually an psuedo upload icon that overlays the real

Right now, whenever i try to put the two icons next to eachother, the "Upload Files" icon gets pushed to the next time and I need these two objects to be on the same line.

So if someone could advise a method to get this done, you'd make me one happy camper.

:) Thanks

Answer 1

Try with:

<div style="float: left; width: 50%;">
select files
</div>
<div style="float: right; width: 50%;">
upload files
</div>

Answer 2

you need to set:

.fakeupload need to have a width ie and float:left

#file_picker_container width:0; float:left;

The div arround the upload button width:40%; float:left;

Open the page up using firebug and play with the CSS

Answer 3

here's how I did it:

the HTML around the upload button with the inline style I changed to:

<div style="position: absolute; right: 0pt; top: 0pt;">     <div id="upload_buttons_container">
        <!--<input type="image" SRC="templates/default/images/Flexshare-Reset.png" id="reset_button" name="reset_button" value="Reset" class="upload">-->
        &nbsp;&nbsp;&nbsp;
        <input type="image" class="upload" value="Upload" name="upload_bn" id="upload_button" src="images/uploadfiles.PNG">
      </div></div>

In the CSS I made the following changes:

.upload {
position:relative;
width:100%;
}

#upload_buttons_container {
width:300px;
}

form .fakeupload {
background:url("../images/selectfiles.PNG") no-repeat 100% 100% transparent;
height:75px;
width:300px;
}