Disobedient Div! (Not floating correctly)

Question

I am trying to put 2 divs next to each other that contain lists of buttons with another button below both of them but am having problems. I have added float: left to both nav-left and nav-right but nav-right is not next to nav-left? Also the lower button #lower is not staying inside the parent div of #container? Here is the fiddle

I have tried everything I know to fix this (which is not a lot!) but to no avail. Thank you for any help : )

Here is the code:

#container{width: 100%; border: 1px solid red;}
#nav-left, #nav-right{width: 50%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;}
#nav-left{position: relative; float: left;}
#nav-right{position: relative; left: 50%;}
#lower{width: 100%; border: 1px solid black; display: block; padding: 10px 0px 10px 0px;}
li {list-style: none;}  
ul a, #lower {color: black; text-decoration: none; text-align: center;  background-color: yellow; display: block; margin: 10px; padding: 9px; border: 1px solid black; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;}
ul a:hover, #lower:hover {background-color: #fff;} 


<div id="container">
  <ul id="nav-left">
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
    <li><a href="#">Left Button</a></li>
  </ul>

  <ul id="nav-right">
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
    <li><a href="#">Right Button</a></li>
  </ul>
  <div style="clear: both"></div>
  <a id="lower" href="#">Lower Button</a></li>
</div>

Answer 1

You need to account for the border style attribute. That is why setting the width of each element to 50% is causing the second element to wrap. Setting the width to a smaller amount (like 49%) will fix the problem.

Also, change

#nav-right{position: relative; left: 50%;}

to

#nav-right{position: relative;}

Answer 2

Three things need to change: Your divs width should be 49% due to the floats. Remove the position:relative; of your divs also. To adjust the button just remove width:100% from #lower and you're all good.

Here is you fiddle

Answer 3

Float pluses +3px to the div,so you have 50% + 50% + extra pixels.(Maybe you should float nav-left to the left and nav-right to the right and set width to the lower value?).That why you have this right-left block issue. And lower button issue fixes with adding width:auto to the ul a, #lower.

Answer 4

1. You have set the width for #nav_left and #nav_right as 50%. Also you have added 1px border. So each <div> will need 2 pixel additional. So you must either 0 the border or reduce the width.

2. You have made both the <div> to float left. So left: 50% is unnecessary.

Also I see the same kind of problem for your lower button, a#lower. This is set to width: 100% along with padding: 9px, border: 1px. This is also overflowing your #container.