Image WILL NOT align to the right?!

[MBrown]

I'm well.. really kicking myself at the moment.

I've been trying all morning now to get an image to align to the very right of a header.

But no matter what I do it won't do what I want. It either gets inserted between the login boxes or it wrecks all the style up I can't figure it out

I've tried adding tables, containers. While I'm not a PHP expert I try my best but somethings like this I could use a bit of help with please!

The below image is "photoshopped" of how I want it to look like:

It's the orange sticker to the very right that is a .png located within my skin folder.

And I presume that to do the above it's all through layout.tpl below is the current code so hopefully someone might be able to help!

[vader21]

Okay you need to make two divs and set widths. Set a float to their corresponding positions and clear. Display set to block.

[MBrown]

Thanks for the tip, don't forget I'm not completely php pro level...

I get most of it, but the laying it out not entirely sure what to add or where exactly to the above code...

So the image would be www.mysite.com/images/image1.png

I can start it but not sure how to end it

</div>
</div>

Many thanks for your help again, thanks for your time!

[vader21]

Well this is a CSS matter not entirely php.... you can start like this:

<div id="top-container">
<div class="login-box"></div>
<div class="image-box"></div>
</div>

Now as for the styling you can try:

#top-container{
width:500px;
clear:left;
float:right;
}
#top-container.login-box{
float:left
width:300px;
}
#top-container.image-box{
width:200px;
float:right;
}

Keep in mind this is a mock up, i have not done any test on it yet... Give some Feedback. This is also just one way of completing your goal of the many ways you can take.

[MBrown]

Well, I probably haven't done it correctly you can see the result at: www.iberworldva.com

Looks like it's aligned to the right but everything else is messed up now.

I did have to change a few things in the code maybe why.

Added the styling to the .css and the rest to the layout.tpl

[vader21]

Okay go back to how you had it, and let me inspect your code to further assist, i may know whats going on here... In the future try entering everything on one essential wrapper instead of having your entire design divided.

[MBrown]

Okay, reverted.

Thanks again let me know if there's anything else.

Didnt think one small image would create so much confusion! haha

[tutmeister]

Your site seems to be offline right now, but I took your code and made a jsfiddle so you could see what I did to make it work:

http://jsfiddle.net/tutmeister/j7V93/10/

Basically, you need a clearing div underneath the two div's that are floated left and right. I also solved the repeating background on your white header and a few other issues I saw. Let me know if you need anymore help with it.

[MBrown]

Brilliant tutmeister thanks, will certainly take a look!

And sorry, yes had it under maintenance mode overnight.

[MBrown]

Many thanks for your time and patience to try all that for me tutmeister.

Although must have done something wrong there :S

I added the parts that you changed but strangely it's not aligning to the right still.

www.iberworldva.com

Wonder why that is :S Obviously I added them respectively to style.css and layout.tpl

Tricky tricky

EDIT: using jfiddle I copied in exactly what I have in layout and stlye from my site and pasted it and replaced what was in jfiddle, now it shows fine on there to the right yet having the exact same things my site still doesnt do it properly. How strange is that.

There is another .css file only one more but can't see anything there that would effect it?

EDIT2: False alarm, it appears to be fine now to the right. Just have to get the login stuff all reordered I suppose now, and another tiny thing when you are eventually logged in, there is nothing up there except the orange sticker and the logo all the "once you are logged in" items vanish :S

EDIT3: Forget the above, just fixed that problem. Something wasn't right with authorizations. Now all that's left is to align the two links when you're not logged in. :S

EDIT4: Works great just aligned them, BUT when you login now it completely throws the page about as per this photo: http://i49.tinypic.com/2wnboqq.png

Why I wonder? Will take a look see if I can work it out.

EDIT5: Ok, done at last thank you so much so very helpful without your input wouldn't have been able to do it I think haha +1

Now gonna see if I can just reduce the space between the banner and the top. So not too much white.

Managed to add another image by adding image box 2 to the css but now it's sort of squeezed the login boxes to the very left:/ WOuld be nice if I couldhave that to the right abit more. Have tried aligning it but not working :S