CSS margin and padding doesnt seem to work - html

Question

I've been trying to add margin and padding to my CSS code but it seems to overlap each other and doesn't work as required.
#logodiv{
padding:5px;
float:left;
border-right: 1px solid #990000;
padding-right:10px;
}
#signindiv{
font-weight:bold;
height:35px;
font-size:0.9em;
float:left;
border-right: 1px solid #990000;
padding:0 15px 0 15px;
}
#signindiv img{
position:relative;
top:3px;
}
#topmenudiv{
float:left;
height:42px;
}
#topmenu ul{
margin:0;
padding:0;
border-right: 1px solid #990000;
}
Have been trying to rescale the here below but its not positioning the way i want it positioned.
#topmenudiv li{
list-style:none;
font-weight: bold;
font-size:0.9em;
border-right: 1px solid #990000;
padding:0 15px 0 20px;
height:25px;
float:left;
}
#searchdiv{
float:left;
padding:5px 0 0 10px;
}
#searchdiv input{
height:25px;
border:none;
padding-left:10px;
font-size:0.9em;
background-image:url("images/magnify.png");
background-repeat:no-repeat;
background-size:15px 15px;
background-position:right center;
}
.break{
clear:both;
}
#newsbar{
background-color: #990000;
width:100%;
height:80px;
color:white;
}
This is the HTML code:
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc-logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth"></div>
</div>
</div>
Ok at the .topbar div the borders separating each #topmenudiv are over extending downwards but in real sense they should end directly where the border height is ending and plus there is a white space between the #newsbar id and the .topbar div. That is where my problem is.