Positioning a PayPal "View Cart" button in the right place

I dont have it uploaded online yet so i don't have an example to show you, sorry. Anyway, I'm putting together my site from photoshop, and i got the code for the paypal view cart button. Since it is a form, and i honestly know nothing about forms, i just wrapped it in a div and floated the div left of my navigation menu in the header (i have 2, one in the header, and one under the header that is page specific). I switched between margin-left and padding-left to push the div over onto my layout where i wanted it, however my layout is centered and stays centered when you resize the window, but the paypal button div stays x pixels from the left side of the screen instead of the left side of the div it is wrapped in. How do I position it so it will move with the page layout instead of the window size? I don't know if that completely makes sense, so here is a quick example of my code:

html:

<div id="wrap">
<div id="header">

<div id="paypalbuttondiv">
<form blah blah copied from paypal>
</form>
</div>

<div class="clearleft">
</div

</div>

<div id="headernav">
<ul>
<li.. etc etc
</div>


</div>

I am still relatively new to this, i occasionally refference W3C or google to find info, haven't been on this site in a long time, but it was always really helpful before so here i am again. I learned about divs and floating from a PSD to HTML/CSS Tutorial on CSS Tricks apparently it isnt the right way to clear a float like i did, but its what i saw on CSS Tricks so i use it haha


I dont know if you'll need more information for an answer, but if you do i'll repsond quickly, i'm working on the site now and will check back here to see if i get a reply every so often.

Thanks in advance

 

<div class="clearleft">
</div

Code (markup):

You are missing an angle bracket there. If it's missing from your code too, I could see that causing problems.
Also, it would help to see CSS that goes with the markup.

 

I copy pasted the code below, i've been messing with it alot so it is a little different, but still having the same problem. I definitely wasn't missing a bracket in the actualy code, I type it all in dreamweaver and it auto fills it in when i type "</" which is handy I guess. I don't use the WYSIWYG part to design though, I have it clicked on LIVE VIEW and just use it to have a split screen and see what i'm changing as i do it.

Thanks again

 

Try this if you want a 1000px wide centered page, with a centered menu that has a Paypal button on the left side.

In the markup, put the "viewcart" div inside the "headernav" div.

In the stylesheet, change div#page-wrap to div#wrap so it matches the ID of the container.
Add display: inline-block; to the headernav div, and also remove width: 1000px;
Remove padding-left:370px; from the "viewcart" div.
Add float: right; to the headernav list, and also remove the padding-right: 55px;

<div id="headernav"> 
   <div id="viewcart">...</div>
   <ul>...</ul>
</div>

div#wrap {
height:auto;
width:1000px;
background-image:url(bg-wrap.jpg);
background-repeat:repeat-y;
display:block;
margin: 0 auto;
}

div#headernav {
display: inline-block;
height:35px;
background-image:url(bg-headernav.jpg);
background-repeat:no-repeat;
padding:0px;
margin:0px;
}

#viewcart { float:left; }

div#headernav ul {
float: right;
padding-top:0px;
margin-top:0px;
text-align:right;
}

Code (markup):

 

I did what you said, it looked right after I just put the viewcart inside the headernav. I also changed the wrap. After doing the rest it messed everything up, so i reversed it back to where it looked good.

Thanks for the help though, it works so i'm more than happy!