CODEWITHSUNDEEP
htmlcssmargin
Chris Brennan
Chris Brennan

Reputation: 191

Unwanted margin between divs

I thought setting all margin and padding to 0 would fix this problem. I notice when I took out the p tags out of the sign div that the margin decreases a little but there looks to still be 1px of white margin between to the topbar div and newbar div that I cannot get rid of. Could someone take a look at this? Here's the code --> http://codepen.io/Chris-Brennan/pen/JYYqrN

Thanks, Chris 

<div id="container">

<div id="topbar">

<div class="fixedwidth">

  <div id="bearLogo">
    <img src="http://hrsbstaff.ednet.ns.ca/hughson/images/Icons/Icon.bear.gif" alt"bear">
   </div>

  <div id="signin">
    <a href="#"><img src="https://cdn4.iconfinder.com/data/icons/berlin/32x32/sign-out.png"><p>Topbar</p>  
     </div></a>

  <div id="topmenu">
    <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>News</li></a>
      <a href="#"><li>Food</li></a>
      <a href="#"><li>Weather</li></a>
      <a href="#"><li>Iplayer</li></a>
      <a href="#"><li>Bears</li></a>
      <a href="#"><li>More...</li></a>
    </ul>                        
  </div> <!--end-topmenu-->

  <div id="searchBox">
      <input type="text" placeholder="Search" />
  </div>

</div> <!--end-fixedwidth-->
</div> <!--end-topbar-->

<div class="break"></div>

<div id="newsbar">
<div class="fixedwidth">
newsbar

</div>
</div>




</div> <!--end-container-->

*{
 border-box:sizing;
 padding:0px;
 margin:0px;
 font-family:verdana,helvetica,arial,sans-serif;
 }
 /*----------------
 TOP BAR
 -----------------*/

 #topbar {
 background:#009966;
 width:100%;
 height:40px;
 color:white;
 margin:0px;
 padding:0px;
 }
 .fixedwidth {
 width:1000px;
 height:40px;
 margin:0 auto;
 padding:0px;
 }
 #bearLogo{
 float:left;
 border-right:1px solid #99CCCC;
 padding-right:30px;
 }
 #signin{
 float:left;
 border-right:1px solid #D8D8D8;
 padding:0px 20px 0 20px;
 font-weight:bold;
 font-size:0.8em;
 width:160px;
 }
 #signin img{
 position:relative;
 left:5px;
 top:5px;
 }
 #signin p{
 position:relative;
 top:-23px;
 left:44px;
 }
 #signin a{
 color:white;
 text-decoration:none;
 }
 #topmenu{

}
#topmenu ul{
list-style:none;
}
#topmenu li{
padding:12px 20px 12px 20px;
border-right:1px solid #D8D8D8;  
float:left;
font-size:0.8em;
}
#topmenu a{
color:white;
}
#searchBox{
float:left;
padding:8px 0px 0 10px;
}
#searchBox input{
width:105px;
height:20px;
border:none;
padding:0px 6px;
font-size:0.7em;
background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2KAItPd4K87egTfclFiqNByGRK94bRks2XTO_5Vbyo8W0O_pPSA");
background-repeat:no-repeat;
background-position:right center;
}
.break{
clear:both;
}
/*----------------
 NEWS BAR
-----------------*/
#newsbar{
float:left;
width:100%;
height:100px;
background:red;
}

Upvotes: 1

Views: 317

Answers (3)

Md. Salahuddin
Md. Salahuddin

Reputation: 1072

Setting the height of div with id "signin" would solve this problem easily

#signin {
  border-right: 1px solid #d8d8d8;
  float: left;
  font-size: 0.8em;
  font-weight: bold;
  height: 100%;
  padding: 0 20px;
  width: 160px;
}

Upvotes: 2

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

Like previously mentioned your code could do with a little restructuring but the issue that's causing this specific problem is the top css statement:

#signin p {
  position:relative;
  top:-23px;
  left:44px;
}

I tend not to use negative margins for this reason. If you remove the top statement, the margin disappears. It does move your p tag out of its intended position, but this can be fixed by adding a float:left; to #signin img{ and line-height:36px; to #signin p{ (I would also probably use 3em insetad of 36px).

https://jsfiddle.net/ac0qv98t/

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

A lot of mistakes:

  • Your #signin div has an extra margin which is coming outside.
  • Your markup is invalid. You have encapsulated <li> inside <a> tag, which is a crime.

Solutions

#signin {height: 40px;}
#container {background-color: #009966 !important;}

The above is a hack.

Preview:

Fiddle: http://codepen.io/anon/pen/QjyWBd

Upvotes: 2

Related Questions