SN1Dan SN1Dan - 7 months ago 13
HTML Question

how to space 4 images equally within a div?

i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?

CSS

.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}


HTML

<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>

Answer

I would place a div around the images and place the height of the divs to 25%.

HTML

<div class="header">
  <div class="headercontent">
    <div class="socialbuttonstop">

      <div class="social_btn">
        <img src="Images/facebooksmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/twittersmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/googlesmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/linkedinsmall.png"/>
      </div>

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

CSS

.socialbuttonstop {
  height: 150px;
  width: 35px;
  margin-left: 915px;
  position: absolute;
}

.social_btn {
  height: 25%;
}
Comments