Layout, content outside div container

I am trying to code a simple contact box. Unfortunately I can't get the layout right, alignments are wrong, and the "contact-content" text + image are outside of the second div container...

Here my code so far:

div.contact {
  border: 1px solid black;
}

div.contact-heading {
  border-bottom: 1px solid black;
  padding: 11px 20px;
}

.contact-heading-icon {
  float: right;
}

.contact-content {
  padding: 11px 20px;
}

.contact-content-text {
  float: left;
  margin-left: 200px;
}

.contact-content-image {
  width: 170px;
  height: auto;
  float: left;
}
<div class="contact">
  <div class="contact-heading">
    <p class="contact-heading-text">Kontakt</p>
    <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" />
  </div>
  <div class="contact-content">
    <img src="../images/img-contact-person.png" alt="" class="contact-content-image" />
    <p class="contact-content-text">Your Contact<br><br>
      <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> email@company.com
    </p>
  </div>
</div>

2 answers

  • answered 2017-06-17 18:19 James Douglas

    You need to remove the float: left; on .contact-content-text and .contact-content-image

    div.contact {
      border: 1px solid black;
    }
    
    div.contact-heading {
      border-bottom: 1px solid black;
      padding: 11px 20px;
    }
    
    .contact-heading-icon {
      float: right;
    }
    
    .contact-content {
      padding: 11px 20px;
    }
    
    .contact-content-text {
      margin-left: 200px;
    }
    
    .contact-content-image {
      width: 170px;
      height: auto;
    }
    <div class="contact">
      <div class="contact-heading">
        <p class="contact-heading-text">Kontakt</p>
        <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" />
      </div>
      <div class="contact-content">
        <img src="../images/img-contact-person.png" alt="" class="contact-content-image" />
        <p class="contact-content-text">Your Contact<br><br>
          <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> email@company.com
        </p>
      </div>
    </div>

  • answered 2017-06-17 18:19 Ricky Dam

    You need to add display: inline-block to .contact-content

    div.contact {
      border: 1px solid black;
    }
    
    div.contact-heading {
      border-bottom: 1px solid black;
      padding: 11px 20px;
    }
    
    .contact-heading-icon {
      float: right;
    }
    
    .contact-content {
      padding: 11px 20px;
      display: inline-block;
    }
    
    .contact-content-text {
      float: left;
      margin-left: 200px;
    }
    
    .contact-content-image {
      width: 170px;
      height: auto;
      float: left;
    }
    <div class="contact">
      <div class="contact-heading">
        <p class="contact-heading-text">Kontakt</p>
        <img src="../images/icon-contact-person.png" alt="" class="contact-heading-icon" />
      </div>
      <div class="contact-content">
        <img src="../images/img-contact-person.png" alt="" class="contact-content-image" />
        <p class="contact-content-text">Your Contact<br><br>
          <b>Name Familyname</b><br> Company Name<br> Street City<br> T 123 123 45 67 89<br> email@company.com
        </p>
      </div>
    </div>