why div is flowing in console

Question

why my #site-bg (div) element though is in just below #search but its not floating to right and in console why when i hover over#site-bg its shows from top of the page why not just after #search div and also why its not floating to right and also help me to circle the #logo radius property insnt working Thanks

<!DOCTYPE> 
<html>
<head>
    <title>index</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="one.css"></head>
        <body>
<header>
<div id="main-nav">
<li id="logo"><img src="images/logo.jpg"  alt="Freeware" class="slogo"></li>

<ul class= "mnav">
    <li> <a href=""> Windows <a></li>
    <li> <a href=""> Mac <a></li>
    <li> <a href=""> Anroid <a></li>
    <li> <a href=""> ios <a></li>
    </ul>
</div>
</header> 
<div id="first-nav">
    <ul class="fnav">
        <a href=""><li> Driver</a></li>
        <a href=""><li> Top Apps </a></li>
        <a href=""><li> Feature </a></li>
        <a href=""><li> News </a></li>
        <a href=""><li> Updates </a></li>
    </ul>
</div>

<div id ="search">

       <form>
       <input type="text" placeholder="Search..." required>
       <input type="button" value="Search">
       </form>
</div>

<div id="site-bg">
<img src="images/logo1.png" class="sbg" alt="site-background">
</div>

<div id="site-brief">
<h2 class="briefhead"> THE LATEST VERSIONS <br> OF THE BEST SOFTWARE</h2>

<ul class="briefli">
<li>Hand picked software titles-only the best!</li>
<li>Tested for malware,adware and viruses</li>
<li>No added bundles, installers or toolbars</li>   
<li class="browsebtn"> Browse Software</li>
</ul>

</div>

<div id="clog">
<span class="cat"> CATEGORIES</span>
<ul class="item">
    <li> 
    Browser System Tunning File Sharing Compression Messaging  Networking File Transfer Drivers  Anti-Malware Photo/Image Security Multimedia Office/News Desktop Develpoer CD/DVD

</li>

</ul>
</div>
</body>
</html>

body{
 background:grey;
}


a:link{
    text-decoration: none;}



#main-nav{
min-height:100px;
width:100%;
background: #002873;
margin-top:3px;
margin-bottom:3px;
float:right;
list-style: none;
}


#logo .slogo{
height:30%;
float:left;
padding:30px 400px 30px 70px;
/*border-radius: 70%*/
}





.mnav li{
padding:20px 20px;
list-style: none;
font-size: 25px;
float:left;
color:white;
margin-top: 50px;
}



.mnav li a{
color:white;
}


.mnav li a:hover{
color:black;
}

#first-nav{
    min-height:70px;
    width:50%;
    display:block-inline;
    background:white;
    float:left;
}


.fnav li{
font-size:25px;
list-style: none;
float:left;
padding:0 13px;
color:#002873;
font-weight:bold;
}

#search{
width:40%;
min-height: 70px;
background:red;
float:right;
display:block;
padding:0 20px;
margin-bottom: 5px; 
}

#search::after{ 
   content: "";
   display: block; 
   clear: both;
}


#site-bg{
    max-width:50%;
    background-color:yellow;
}

.sbg{
height:50%;
float:right;
/*padding:10px;*/
/*display:inline-block;*/
margin-top: 20px



}

#site-brief{
background:blue;
width:50%;
display: inline-block;
margin-top:0 10px;
min-height:100px;
padding:20px;
}

.briefhead{
    padding-left:190px;
    line-height: 115%;
    color:white;
    word-spacing: 5px;
    font-size: 33px;
    display: block;
 }



.briefli{
      list-style-type: square;  
      list-style-position: inside; 
      padding-left:150px;
      font-size:20px;
      font-weight: bold;
      margin-top:10px;
      color:white;
    }




}

span .cat{
    background: yellow;
    width:60%;
    font-size: 30px;
    margin-top:5px;
    padding:20px 7px 12px 27px;
    display: block;
    }


ul.item{
background: yellow;
word-spacing: 20px;
font-weight: bold;
line-height: 400%;
list-style:none;
font-size: 110%;
width: 60%;
padding-left:34px;
}

Answer 1 · 2017-04-04T15:33:51Z

April 4, 2017 3:33pm

Try to fix your HTML first:

<li> <a href=""> Windows <a></li>
<li> <a href=""> Mac <a></li>
<li> <a href=""> Anroid <a></li>
<li> <a href=""> ios <a></li>

anchor tags need to be closed by </a>

Also why do you have a } that leads to nowhere?

.briefli { list-style-type: square;
list-style-position: inside; padding-left:150px; font-size:20px; font-weight: bold; margin-top:10px; color:white; } }

Answer 2 · 2017-04-04T15:44:44Z

April 4, 2017 3:44pm

thanks that was foolish thing i will be adding link to those later but im stuck in this and always and after ur suggestion its still not working or how would u do it in ur language i can sort out from there thank you

Answer 3 · 2017-04-04T15:45:36Z

April 4, 2017 3:45pm

its long as im a newbie to this so can you please help me sort this thing thanks for your precious time

Answer 4 · 2017-04-04T16:10:51Z

April 4, 2017 4:10pm

I'll try to figure out what is going wrong here, but can you be more specific on what is going wrong?

The solution to your border radius is that you commented that line out.

/* */ is used in css to comment on multiple lines. The syntax is correct

You also forgot a semicolon at .sbg at margin-top and at your #logo border-radius after the 70%

Answer 5 · 2017-04-04T17:33:18Z

April 4, 2017 5:33pm

ok Thank you cuz it was not working so i commented that line and Hope you will sort it out soon and help me soon looking from you .Thanks

Answer 6 · 2017-04-04T18:12:56Z

April 4, 2017 6:12pm

Is this how you wanted your logo to line out? https://puu.sh/v9esI/bc0b5a2bfb.png

I have fixed your html & css:

<!DOCTYPE>
<html>
  <head>
    <title>index</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="one.css">
  </head>
  <body>
    <header>
      <div id="main-nav">
        <li><img src="https://pbs.twimg.com/profile_images/847513702396039168/qMNyD0x-.jpg"  alt="Freeware" class="slogo"></li>
          <ul class="mnav">
            <li><a href="">Windows</a></li>
            <li><a href="">Mac</a></li>
            <li><a href="">Anroid</a></li>
            <li><a href="">ios</a></li>
          </ul>
      </div>
    </header>
    <div id="first-nav">
      <ul class="fnav">
        <a href=""><li>Driver</a></li>
        <a href=""><li>Top Apps</a></li>
        <a href=""><li>Feature</a></li>
        <a href=""><li>News</a></li>
        <a href=""><li>Updates</a></li>
      </ul>
    </div>
    <div id="search">
      <form>
      <input type="text" placeholder="Search..." required>
      <input type="button" value="Search">
      </form>
    </div>

    <div id="site-bg">
      <img src="images/logo1.png" class="sbg" alt="site-background">
    </div>
    <div id="site-brief">
      <h2 class="briefhead"> THE LATEST VERSIONS <br> OF THE BEST SOFTWARE</h2>

      <ul class="briefli">
        <li>Hand picked software titles-only the best!</li>
        <li>Tested for malware,adware and viruses</li>
        <li>No added bundles, installers or toolbars</li>
        <li class="browsebtn"> Browse Software</li>
      </ul>
    </div>

    <div id="clog">
      <span class="cat"> CATEGORIES</span>
        <ul class="item">
          <li>
        Browser System Tunning File Sharing Compression Messaging  Networking File Transfer Drivers  Anti-Malware Photo/Image Security Multimedia Office/News Desktop Develpoer CD/DVD
          </li>
        </ul>
    </div>
  </body>
</html>

body {
  background:grey;
}

a:link {
  text-decoration: none;
}

#main-nav {
  min-height:100px;
  width:100%;
  background: #002873;
  margin-top:3px;
  margin-bottom:3px;
  float:right;
  list-style: none;
}

.slogo {
  height: 30%;
  float: right;
  padding:30px 400px 30px 70px;
  border-radius: 70%;
}
.mnav li {
  padding:20px 20px;
  list-style: none;
  font-size: 25px;
  float:left;
  color:white;
  margin-top: 50px;
}

.mnav li a {
  color:white;
}

.mnav li a:hover {
  color:black;
}

#first-nav{
  min-height:70px;
  width:50%;
  display:block-inline;
  background:white;
  float:left;
}

.fnav li {
  font-size:25px;
  list-style: none;
  float:left;
  padding:0 13px;
  color:#002873;
  font-weight:bold;
}

#search {
  width:40%;
  min-height: 70px;
  background:red;
  float:right;
  display:block;
  padding:0 20px;
  margin-bottom: 5px;
}

#search::after{
  content: "";
  display: block;
  clear: both;
}
#site-bg {
  max-width:50%;
  background-color:yellow;
}

.sbg {
  height:50%;
  float:right;
  /*padding:10px;*/
  /*display:inline-block;*/
  margin-top: 20px;
}

#site-brief {
  background:blue;
  width:50%;
  display: inline-block;
  margin-top:0 10px;
  min-height:100px;
  padding:20px;
}

.briefhead {
  padding-left:190px;
  line-height: 115%;
  color:white;
  word-spacing: 5px;
  font-size: 33px;
  display: block;
}

.briefli {
  list-style-type: square;
  list-style-position: inside;
  padding-left:150px;
  font-size:20px;
  font-weight: bold;
  margin-top:10px;
  color:white;
}

span .cat {
  background: yellow;
  width:60%;
  font-size: 30px;
  margin-top:5px;
  padding:20px 7px 12px 27px;
  display: block;
}
ul.item {
  background: yellow;
  word-spacing: 20px;
  font-weight: bold;
  line-height: 400%;
  list-style:none;
  font-size: 110%;
  width: 60%;
  padding-left:34px;
}

Answer 7 · 2017-04-04T18:23:44Z

April 4, 2017 6:23pm

Thanks yes its good but i wanted it fully circle like the image in your treehouse just by side of ur score fully circle but the main problem is in div after # search i.e div #site-bg, element in webpage is showing in good place but opening up console and when u hover over it #site-bg its background shows from top of the page should not it just show after #search and image in same div .sbg is not floating to all corner to right

Answer 8 · 2017-04-04T18:38:26Z

April 4, 2017 6:38pm

Your picture isn't getting it's border-radius because of the padding you gave it. In order to make an image circular you can either use 50% for the treehouse icon, or you can make it 100% for an oval shape.

Remove the padding and see what happens for yourself

.slogo {
  height: 30%;
  float: right;
  border-radius: 50%;
}

Here is a reference to padding / margin https://www.w3schools.com/css/css_padding.asp

https://www.w3schools.com/css/css_margin.asp

Answer 9 · 2017-04-04T18:44:40Z

April 4, 2017 6:44pm

ok for sure yes i have tested that and came to knew it so now i knew what was the cause so i had left it but the real problem is its flowing from top of page in console where its another div so it must start from just after last div above it so please help me here and did u get where im pointing you.the main problem is in div after # search i.e div #site-bg, element in webpage is showing in good place but opening up console and when u hover over it #site-bg its background shows from top of the page should not it just show after #search and image in same div .sbg is not floating to all corner to right

Welcome to the Treehouse Community

Looking to learn something new?

krishna aryal

krishna aryal

why div is flowing in console

9 Answers

Luc de Brouwer

Luc de Brouwer

krishna aryal

krishna aryal

krishna aryal

krishna aryal

Luc de Brouwer

Luc de Brouwer

krishna aryal

krishna aryal

Luc de Brouwer

Luc de Brouwer

krishna aryal

krishna aryal

Luc de Brouwer

Luc de Brouwer

krishna aryal

krishna aryal