CSS Element positioning - css

Question

I freely admit right up front that I am not blessed with even a speck of design ability. Nonetheless, I find myself hacking through CSS for a simple website. I've run into a problem and for the life of me I can't figure out the issue. The basics...
I have a <div> that contains the entire page and sets the boundaries. The width is set at 1200px. After a other elements I have a links bar that spans the width of the page. This is in a <div> with the id "pinkbar". The "pinkbar" has a width set to 100%, which would be 100% of the 1200px containing division. I created small padding on the left and larger padding on the right to properly position elements within the bar. I need to add one element to the left, a simple text telephone number, and then several links to the right. I put the telephone # in it's own <div> with the id of "pinkphone", and floated that <div> to the left. Worked perfectly. Now I start to add the links. I created a <div> named "pinktest" for the first link, added a border and the text link inside of the division and floated it to the right. And that is where thinks stopped playing nicely. The link division, "pinktest", floats to right about 50px beyond the border of it's containing division, and about 100px to the right beyond that border if you factor in the padding. I've played and tinkered with this to the best of my limited ability and have found no love at all. If someone can offer a suggestion as to how to make this work please do. I still need to add four more links, all floated right, along with the "pinktest" one. Relevant code below:
The CSS:
#pinkbar{
background-image: url(../visual/pinkMenuBar.jpg);
background-repeat: no-repeat;
padding-top: 0px;
padding-left: 30px;
padding-right: 100px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 25px;
}
#pinkphone{
padding-top: 3px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
float: left;
width: auto;
height:25px;
}
#pinktest{
padding-top: 3px;
padding-left: 4px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: grey;
float: right;
width: auto;
height:25px;
}
The HTML:
<div id="pinkbar">
<div id="pinkphone">
<span class="cambria3black">Tel: [phone]</span>
</div>
<div id="pinktest">
<span class="cambria3black">
Testimonials
</span>
</div>
</div>

Answer 1

Here is simplified example of what I think you might be looking for:
HTML:
<nav>
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="info">
<li>Telephone Number</li>
<li>Link 3</li>
</ul>
</nav>
CSS:
nav {
padding: 1em;
}
.links {
float: left;
}
.info {
float: right;
}
nav li {
display: inline;
padding: 1em;
}
You can add as many links as you want.
Demo

Answer 2

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
CSS W3schools
So in fact, the pinktest div is inside the pinkbar division.
You should change the css of pinktest to:
float: left;
Because pinkbar div is using 100% of the page, pinktest would go as far right as possibl. Now it will go as far left as possible, ie. next to pinkphone.