CODEWITHSUNDEEP
csshtmliconsspacing
user2034906
user2034906

Reputation: 1

Aligning Divs, table style, for social media icons

I want to put some social media icons on my footer, two columns each of four icons nicely space, but my code currently only gets me all the icons on top of one another, what would be the solution?

css:

.container
{
}
.container DIV
{
    width: 15px;
    margin: 1px;
}

HTML:

<div>
<div style="width: 200px;" class="container" display: "inline-block" >
<div style="float: left;"><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>
<div style="float: right;"><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>
<div style="float: left;"><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>
<div style="float: right;"><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>
<div style="float: left;"><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>
<div style="float: right;"><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
<div style="float: left;"><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>
<div style="float: right;"><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
</div>

Any help will be highly appreciated! Thanks in advance!

Upvotes: 0

Views: 1215

Answers (2)

user1761123
user1761123

Reputation:

Try something like:

HTML

    <div>

<div style="width: 200px;" class="container" display: "inline-block" >

 <div id="col1" style="float:left">

<div style=""><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>

<div style=""><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>

<div style=""><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>

<div style=""><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>


    </div>


    <div id="col2" style="float:left;"> 
<div style=""><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>   
        <div style=""><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>

    <div style=""><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
    <div style=""><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
    </div>
</div>

CSS 

.container
{
}
.container div
{
    width: auto;
    margin: 1px;
}
.container img
{
    width:30px;
}

Live jsfiddle: http://jsfiddle.net/6AA2L/3/

Upvotes: 0

m.spyratos
m.spyratos

Reputation: 4219

Divs are block elements, so each div will span across the whole line.
To have divs side by side, just remove their block property.

.container .container DIV { width: 15px; margin: 1px; display:inline-block; }

Upvotes: 1

Related Questions