0

Below is HTML code:

   

 #posts {
      width: 1000px;
      height: auto;
      margin: auto;
      border: 3px solid red;
    }

    #header-posts {
      width: 100%;
      height: auto;
    }
#show{
width: 100%;
height: 500px;
}

    .contactus
     {
      width: 100%;
      height: 50px;
      background-color: hsla(0,0%,78%,0.76);
     }
     #main-contactus
     {
      width: 1000px;
      height: 50px;
      margin: auto;
     }
     #linkus
     {
      width: 300px;
      height: 50px;
      position: relative;
      float: left;
     }
     #instagram
     {
      width: 30px;
      height: 30px;
      background-color: #525252;
      border-radius: 30px;
      position: relative;
      top: 20%;
      left: 5%;
      float: left;
      text-decoration: none;
     }
     #instagram::before
     {
      content: "";
      width: 0.9em;
      height: 0.6em;
      background-color: azure;
      position: absolute;
      top: 45%;
      left: 8px;
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
     }
     #instagram::after
     {
      content: "";
      width: 0.45em;
      height: 0.45em;
      background-color: azure;
      position: absolute;
      border: 1px solid #525252;
      top: 35%;
      left: 34%;
      border-radius: 10px;
     }
     #instagram span
     {
      position: absolute;
      width: 0.35em;
      height: 0.25em;
      background-color: azure;
      left: 55%;
      top: 20%;
      border-radius: 1px;
     }
     #instagram p
     {
      text-align: center;
      width: 100px;
      height: 30px;
      background-color: #525252;
      color: white;
      line-height: 30px;
      position: absolute;
      top: 22px;
      left: -32px;
      display: none;
     }
     #instagram p::before
     {
      content: "";
      position: absolute;
      width: 0.5em;
      height: 0.5em;
      background-color: #525252;
      left: 42px;
      top: -3px;
      -webkit-transform: rotate(45deg);
     }
     #instagram:hover p
     {
      display: block;
     }
     #instagram:hover
     {
      background-color: white;
     }
     #instagram:hover::before,
     #instagram:hover::after,
     #instagram:hover span
     {
      background-color: #525252;
     }
     #instagram:hover::after
     {
      
      border: 1px solid white;
     }
     #gmail
     {
      width: 30px;
      height: 30px;
      background-color: #525252;
      border-radius: 30px;
      position: relative;
      top: 20%;
      left: 8%;
      float: left;
      text-decoration: none;
     }
     #gmail::before
     {
      content: "g";
      position: absolute;
      font: bold 25px tohama;
      color: white;
      left: 20%;
     }
     #gmail::after
     {
      content: "+";
      position: absolute;
      font: bold 15px tohama;
      color: white;
      left: 60%;
     }
     #gmail p
     {
      text-align: center;
      width: 100px;
      height: 30px;
      background-color: #525252;
      color: white;
      line-height: 30px;
      position: absolute;
      top: 22px;
      left: -32px;
      display: none;
     }
     #gmail p::before
     {
      content: "";
      position: absolute;
      width: 0.5em;
      height: 0.5em;
      background-color: #525252;
      left: 42px;
      top: -3px;
      -webkit-transform: rotate(45deg);
     }
     #gmail:hover p
     {
      display: block;
     }
     #gmail:hover
     {
      background-color: sandybrown;
     }
     #gmail:hover::before,
     #gmail:hover::after
     {
      color: #525252;
     }
     
     
     
     #facebook
     {
      width: 30px;
      height: 30px;
      background-color: #525252;
      border-radius: 30px;
      position: relative;
      top: 20%;
      left: 11%;
      float: left;
     }
     #facebook::before
     {
      content: "F";
      color: white;
      font: bold 20px tohama;
      left: 30%;
      top: 10%;
      position: absolute;
     }
     #facebook p
     {
      text-align: center;
      width: 100px;
      height: 30px;
      background-color: #525252;
      color: white;
      line-height: 30px;
      position: absolute;
      top: 22px;
      left: -32px;
      display: none;
     }
     #facebook p::before
     {
      content: "";
      position: absolute;
      width: 0.5em;
      height: 0.5em;
      background-color: #525252;
      left: 42px;
      top: -3px;
      -webkit-transform: rotate(45deg);
     }
     #facebook:hover p
     {
      display: block;
     }
     #facebook:hover
     {
      background-color: white;
     }
     #facebook:hover::before
     {
      color: saddlebrown;
     }
     
     
     #telegram
     {
      width: 30px;
      height: 30px;
      background-color: #525252;
      border-radius: 30px;
      position: relative;
      top: 20%;
      left: 14%;
      float: left;
      text-decoration: none;
     }
     #telegram::before
     {
      content: "Tele";
      position: absolute;
      color: white;
      font: bold 10px tohama;
      left: 20%;
      top: 15%;
     }
     #telegram::after
     {
      content: "Gram";
      position: absolute;
      color: white;
      font: bold 10px tohama;
      top: 45%;
      left: 8%;
     }
     #telegram p
     {
      text-align: center;
      width: 100px;
      height: 30px;
      background-color: #525252;
      color: white;
      line-height: 30px;
      position: absolute;
      top: 22px;
      left: -32px;
      display: none;
     }
     #telegram p::before
     {
      content: "";
      position: absolute;
      width: 0.5em;
      height: 0.5em;
      background-color: #525252;
      left: 42px;
      top: -3px;
      -webkit-transform: rotate(45deg);
     }
     #telegram:hover p
     {
      display: block;
     }
     #telegram:hover
     {
      background-color: white;
     }
     
     #telegram:hover::before,
     #telegram:hover::after
     {
      color: red;
     }
     
     #fav-site
     {
      width: 700px;
      height: 50px;
      float: left;
     }
     #fav-site a
     {
      text-align: center;
      width: 120px;
      height: 30px;
      font: bold 20px tohama;
      color: #525252; 
      float: left;
      text-decoration: none;
      margin-left: 10px;
      margin-top: 10px;
      line-height: 30px;
     }
     #fav-site a:hover
     {
      background-color: brown;
      color: azure;
     }
     .footer
     {
      width: 100%;
      height: 50px;
      background-color: brown;
     }
     #p-footer
     {
      width: 1000px;
      height: 50px;
      margin: auto;
      position: relative;
     }
     #p-footer p
     {
      direction: none;
      color: hsla(0,0%,80%,0.78);
      font: bold 15px tohama;
      text-align: center;
      margin-top: 0px;
      line-height: 50px;
     }
     #p-footer p a
     {
      text-decoration: none;
      color: white;
      float: left;
      position: absolute;
      left: 150px;
     }
     #p-footer:hover a
     {
      color: hsla(127,100%,50%,1.00);
     }
    <div id="posts">
      <div id="header-posts">
<div id="show">

</div>
      </div>
    </div>


    <div class="contactus">
     <div id="main-contactus">
     </div>
    </div>

when i want to see result the height of posts div don't increase but when i want to right the posts div that increase what do i do ? please help me. i edit it but when i run this code in this site the result is true but when i want to run in mozilla or chrome not the result is false because not increase by height of show div.i want to make response the list

behnam hosseini arani
  • 5
  • 6
  • what exactly do you want to do ? – Yousaf Oct 26 '17 at 13:56
  • @Yousaf he wants to clearfix his `#posts` div. – coderodour Oct 26 '17 at 13:57
  • Possible duplicate of [How to make a div grow with content?](https://stackoverflow.com/questions/4657148/how-to-make-a-div-grow-with-content) – coderodour Oct 26 '17 at 13:59
  • If this is not a duplicate (from your description, which is not very good, it sounds like you have a float issue), let me know and I will reopen it if you provide a better explanation and a [MCVE] showing your problem - your current doesn't replicate what you are trying to describe – Pete Oct 26 '17 at 14:02
  • i want to make the list of many house list to show with one div that hase the pagebar of site that is top of this div and the many divs that are Continuous and the divs that are in the one div that name is posts – behnam hosseini arani Oct 26 '17 at 14:09
  • You need to create a more complete example that is showing your current problem then as your current example is of no use to anyone – Pete Oct 26 '17 at 14:23
  • i edit it i want to make response list that increase the height by datas in database – behnam hosseini arani Oct 26 '17 at 15:41

0 Answers0