Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Getting Started with CSS Layout Creating a Layout Wrapper

krishna aryal
krishna aryal
6,897 Points

why div is flowing in console

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;
}

9 Answers

Luc de Brouwer
seal-mask
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

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; } }

krishna aryal
krishna aryal
6,897 Points

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

krishna aryal
krishna aryal
6,897 Points

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

Luc de Brouwer
seal-mask
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

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%

krishna aryal
krishna aryal
6,897 Points

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

Luc de Brouwer
seal-mask
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

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;
}
krishna aryal
krishna aryal
6,897 Points

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

Luc de Brouwer
seal-mask
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

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

krishna aryal
krishna aryal
6,897 Points

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