Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

krishna aryal
krishna aryal
6,897 Points
Posted by krishna aryal
krishna aryal
6,897 Points

divs

Why last div is overlapping and list style isn't working ? Doesn't div automatically adjust itself and what is happening with display block can someone help!! 

<!DOCTYPE> 
<html>
<head>
    <title>index</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="one.css"></head>
        <body>
<header>
<div class="main-nav">
<ul class= "nav">
    <li class="site-name"> Name </li>
    <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>

<div class ="search">
<p>search for it </p>
</div>


<div class="sec-nav">
    <ul class="secnav">

        <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 class="brief">
<img src=""  class="briefimg">
<h2> THE LATEST VERSIONS <br> OF THE BEST SOFTWARE</h2>
<p> Hand picked software titles-only the best! </p>
<p> Tested for malware,adware and viruses</p>
<p> No added bundles, installers or toolbars</p>    
<p class="Browse"> Browse Software</p>


</div>  
</header>









</body>
</html>

body{
 background:grey;
}


.main-nav{
min-height:70px;
width:100%;
background: #002873;
margin-top:3px;
margin-bottom:3px;
}

a:link{
    text-decoration: none;}

.nav li a{
color:white;
}


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


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

.nav .site-name{
padding:0 680px 0 0;
}

.search{
display:inline-block;
width:50%;
min-height:100px;
background:red;
float:right;

}


.sec-nav{
    min-height:70px;
    width:50%;
    display:block;
    background:white;
  float:left;
}


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



.brief{
background:blue;
width:100%;
display: block;
margin-top:5px;
min-height:100px;
}

.brief h2{
    padding-left:15px;
    line-height: 115%;
    color:white;

 }



.brief p{
      list-style-type: square;   
      padding-left:30px;
      font-size:20px;
      font-weight: bold;
      margin-top:10px;
      color:white;
      line-height:59%;

4 Answers

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

What is it you are trying to accomplish with the layout? Looks like your list-style: none is working fine. list-style-type: square is being added to a paragraph, which will not work. Those paragraphs in the last div should probably be a list.

krishna aryal
krishna aryal
6,897 Points
krishna aryal
krishna aryal
6,897 Points

and why div are overlapping ??

krishna aryal
krishna aryal
6,897 Points
krishna aryal
krishna aryal
6,897 Points

im trying to adjust first and second div in one 50% 50% and last div just below them with width 100%

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

Try clearing the float on your brief div. I also suggest reviewing your code for syntax errors such as tags not being properly closed, I see errors on both your lists.

krishna aryal
krishna aryal
6,897 Points
krishna aryal
krishna aryal
6,897 Points

Thank you it worked and that mean its good to use clear after float but display-block for third div should automatically push it from floated element isnt?? and seprate it without using clear??