CSS margin and padding doesnt seem to work
<p>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.</p>

<pre><code>  #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;
}
</code></pre>

<p>Have been trying to rescale the here below but its not positioning the way i want it positioned.</p>

<pre><code>#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;
 }
</code></pre>

<p>This is the HTML code:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div id="topbar"&gt;
        &lt;div class="fixedwidth"&gt;
            &lt;div id="logodiv"&gt;
                &lt;img src="images/bbc-logo.png"  /&gt;
            &lt;/div&gt;
            &lt;div id="signindiv"&gt;
                &lt;p&gt;&lt;img src="images/signin.png"  /&gt;Sign In&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="topmenudiv"&gt;
                &lt;ul&gt;
                    &lt;li&gt;News&lt;/li&gt;
                    &lt;li&gt;Sports&lt;/li&gt;
                    &lt;li&gt;Weather&lt;/li&gt;
                    &lt;li&gt;iPlayer&lt;/li&gt;
                    &lt;li&gt;TV&lt;/li&gt;
                    &lt;li&gt;Radio&lt;/li&gt;
                    &lt;li&gt;More...&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div id="searchdiv"&gt;
                &lt;input type="text" placeholder="Search" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="break"&gt;&lt;/div&gt;
    &lt;div id="newsbar"&gt;
        &lt;div class="fixedwidth"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>