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.

HTML

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

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

and why div are overlapping ??

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

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

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??