how to space 4 images equally within a div?


Tags: html,css

Problem :

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>


Solution :

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%;
}

    CSS Howto..

    How to create CSS/JavaScript circles grid

    How to make custom shape div, or manipulate divs

    How to make navigation bar scroll with the page?

    How to set a background color defined as a CSS class (using JQuery eventually)?

    CSS preprocessors workflow - how does it really work?

    How to highlight selected tab in Web Forms including Master Page

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • Why will show() only work for fields that are hidden using inline css?

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How to always refresh file loaded by ajax, avoiding cached file

    How to make a content div stretch from a header div to a footer div?

    How to increase Page Width with the Help of CSS?

    How to display an image using an img tag and css and class instead of src attribute

    How to put text and image in a same line?

    How do I keep my input fields on one line while centering the DIV that contains them?

    How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

    How to programmatically add JS and CSS resources to ?

    HTML/CSS: How to use another font for list-item Bullets

    What shape is this, and how can i achieve it using css?

    How to give cross browser transparency to element's background only?

    How does chrome extend the search window beyond the browser window

    How to access an svg inner id and have CSS change the fill color of that id?

    How can I hide slide menu in appcelerator?

    Is there a limit to how deep an HTML document or CSS tree can be?

    Picture doesn't show up [closed]

    How to set specific css value for javaFX ProgressBar during Runtime?

    How to set a box on bottom of a box?

    How to segregate these divs with 'position:absolute' into different groups?

    How are table cell widths calculated in html?

    How to add a google map icon to this code?