Problem with nested elements

nested elements

[SirTalksalot]

Hi all,

I'm having a real problem with this. No matter what I try, I can't get the nested elements to float left and right properly. No matter what I try, it won't work.

The left button is fine, the middle button is fine, but the right button just refuses to float right. I've tried giving everything a height value, no change. I've tried using absolute and relative positions, no change. I've tried adding clear to various bits, no change. I am completely out of my depth it seems.

Here's the HTML

 <div id="button_container">
<div id="left_button" class="rollover"><a href="#">Item 1</a></div>
 <div id="buttons_float_right">
 <div id="middled_button" class="rollover2"><a href="#">Item 2</a></div>
 <div id="right_button" class="rollover3"><a href="#">Item 3</a></div>
 </div> <!-- End buttons_float_right -->
 </div> <!-- End button container -->

Here's the CSS - I've included the pseudo classes just in case they have anything to do with it.

#button_container {
height: 78px;
margin-top: 20px;
}

#left_button {
float: left;
width: 300px;
}
#buttons_float_right {
width: 600px;
float: right;
}
#middle_button {
width: 300px;
float: left;
}
#right_button {
width: 300px;
float: right;
}
.rollover a {
display:block;
width: 290px;
text-decoration: none;
background-image: url(images/button_motion_graphics.jpg);
background-repeat: no-repeat;
background-position: 0 0;
height: 78px;
}
.rollover a:hover {
background-position: 0 -78px;
color: #049;
}
.rollover a:active {
background-position: 0 -156px;
color:#fff;
}
.rollover2 a {
display:block;
width: 290px;
text-decoration: none;
background-image: url(images/button_web_design.jpg);
background-repeat: no-repeat;
background-position: 0 0;
height: 78px;
}
.rollover2 a:hover {
background-position: 0 -78px;
color: #049;
}
.rollover2 a:active {
background-position: 0 -156px;
color:#fff;
}
.rollover3 a {
display:block;
width: 290px;
text-decoration: none;
background-image: url(images/button_contact.jpg);
background-repeat: no-repeat;
background-position: 0 0;
height: 78px;
}
.rollover3 a:hover {
background-position: 0 -78px;
color: #049;
}
.rollover3 a:active {
background-position: 0 -156px;
color:#fff;
}

Someone please tell me why this isn't working and put me out of my misery.

Sincerely thank you in advance if you can help.

[SirTalksalot]

OH God, never mind. It was the bloody 'D' in the html. You don't know how many hours I've been screwing over this, and it was just a bloody typo! I'm am so so thick. :(((