'Image and text in contact bar

Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:

.contact_bar {
    width: 100%;
    height: 50px;
    background: #2c3e50;
    color: #ffffff;
    border-bottom: solid 2px #c9c9c9;
}

.contact_bar_container {
    width: 1050px;
    height: 50px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.contact_bar_text {
    width: 100%;
}

.contact_bar_call {
    background-image: url(/images/call.png);
    height: 32px;
    width: 32px;
    float: left;
    margin-top: 8px;
    float: left;
    margin-right: 100px;
}

.contact_bar_email {
    background-image: url(/images/email.png);
    height: 32px;
    width: 32px;
    float: left;
    margin-top: 8px;
}
<div class="contact_bar">
  <div class="contact_bar_container">
  
    <div class="contact_bar_call">
      <div class="contact_bar_text">
        Call here
      </div>
    </div>
    
    <div class="contact_bar_email">
      <div class="contact_bar_text">
        Email here
      </div>
    </div>
  </div>
</div>

I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.

htmlcss


Solution 1:[1]

Here a solution using img html tag instead of background-image. I edited a bit your html code.

So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>

.contact_bar {
    width: 100%;
    height: 50px;
    background: #2c3e50;
    color: #ffffff;
    border-bottom: solid 2px #c9c9c9;
}

.contact_bar_container {
    width: 1050px;
    height: 50px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

.contact_bar_content{
  display: flex;
  align-items: center;
  padding: 0 15px;
  }

.contact_image{
  height: 15px;
  width: 15px;
  background-color: red;
  margin-right: 5px;
  }
<div class="contact_bar">
  <div class="contact_bar_container">
  
    <div class="contact_bar_content">
      <div class="contact_image">
      </div>
      <div class="contact_bar_text">
        Call here
      </div>
    </div>
    
    <div class="contact_bar_content">
      <div class="contact_image">
      </div>
      <div class="contact_bar_text">
        Email here
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Victor Allegret

Related Questions