CODEWITHSUNDEEP
htmlcss
Foxtrot
Foxtrot

Reputation: 35

Background color disappears

Hi i have problem whenever i try to set my nav to float to the right and my #logo to left my background color of header dissaper. What is best solution to fix this.

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
}
#logo{
  padding-left: 30px;
  padding-top: 20px;
}
header a{
font: 1.5 Arial, Helvetica, sans-serif;
color: #006EB7;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
 }
 header li{
   text-align: right;
    display:inline-block;
 padding: 0 15px 0 15px;
 padding-top: 50px;
}
header #logo{
  float: left;
}
header nav{
float: right;
}
<header>
  <div id="Logo">
  <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\reeee1.png" width="196px" height="124px">
</div>
<nav>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CATALOG</a></li>
  <li><a href="#">CONTACT</a></li>
</nav>
</header>

Upvotes: 0

Views: 1581

Answers (2)

OluO
OluO

Reputation: 94

Floating your #logo and #nav, without floating the header means those elements are both floating to the left and right of your header, adding a float to your Header and width like below should fix it. :)

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
  float:left;
  width:100%;
}

Upvotes: 0

Chiller
Chiller

Reputation: 9738

Add overflow:hidden; to the parent header and it will fix the problem

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
  overflow:hidden;
}
#logo{
  padding-left: 30px;
  padding-top: 20px;
}
header a{
font: 1.5 Arial, Helvetica, sans-serif;
color: #006EB7;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
 }
 header li{
   text-align: right;
    display:inline-block;
 padding: 0 15px 0 15px;
 padding-top: 50px;
}
header #logo{
  float: left;
}
header nav{
float: right;
}
<header>
  <div id="Logo">
  <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\reeee1.png" width="196px" height="124px">
</div>
<nav>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CATALOG</a></li>
  <li><a href="#">CONTACT</a></li>
</nav>
</header>

Upvotes: 1

Related Questions