Page is live at: http://www.concretestairslondon.co.uk/index.php

 

I've incorporated ShareThis egg into my site. My plan was to have all sharing related stuff in one neat line under a grandparent <div id="social">.

 

My plan was to have the width of the <div id='shareThisEgg' shrinkwrapped. So it automatically resizes to when it's expanded, and shrinks to when it's a standard egg.

 

Then to the right of that I would like my like, and follow buttons:

• Facebook like button;
• Subscribe on youtube button;
• Follow on twitter button;
• Follow on linked in button;

 

My plan was to put a div on all of these, set width to auto, then float left, then adapt a little padding to suit.

 

However it's just not working, so I then tried adding to my css file the formatting to go specifically for the .twitter-follow-button twitter-follow-button (class), thinking that it might have some automatic formatting applied (which I'm sure it does otherwise it would have no image). But again, width: auto, and float: left; have done nothing!

 

Anyone know what to do with these buttons?

 

<div id="social">
	<!--Egg Display-->
    	<div id='shareThisShareEgg' class='shareEgg'></div>
		</div>
    <!--Egg Display-->
 
	<!--Display FB Like-->
    <div class="fb-like" data-href="http://www.concretestairslondon.co.uk/index.php" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true">
    </div>
    <!--Display FB Like--> 
    
    <!--Display follow youtube-->
    <div id="youtube">
    <a href="//www.youtube.com/subscription_center?add_user_id=l69RZKyfBPU5_fu6_J3ENg&feature=creators_cornier-//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_130x36_red.png"><img src="//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_130x36_red.png" alt="Subscribe to Concrete Stairs on Youtube"/></a><img src="//www.youtube-nocookie.com/gen_204?feature=creators_cornier-//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_130x36_red.png" style="display: none"/>
    </div>
    <!--End Follow Youtube-->
    
    <!--Display Follow Twitter-->
    <div>
    <a href="https://twitter.com/PreciseFormwork" class="twitter-follow-button" data-show-count="false">Follow @PreciseFormwork</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <!--End Follow Twitter-->
    
    <!--Display Follow Linked In-->
    <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/FollowCompany" data-id="846261" data-counter="none"></script>
	<!--End Linked In-->
    
    </div>
    <!--End Social Sharing-->

 

/*Social Buttons*/

#shareThisShareEgg {
clear: right;	
}

.fb-like {
float: left;
}

#youtube {
padding: 0 0 0 10%;	
}

.twitter-follow-button twitter-follow-button {
width: auto;
float: left;	
}

/*End Social Buttons*/

/*Standard Formatting*/
body {
padding: 0px;
margin: 0px;
background-color: #000000;
}

/*Navigation Bar Formatting*/
#nav {
padding:0;
margin:0;
}

#nav-list {
position:relative;
padding:0;
margin:0;
}

#nav-list li{
position:relative;
display:inline;
padding:0 1.5em 0 0;
margin:0;
font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 2em;
color: #999;
}

#nav-list li a{
text-decoration:none;
color:#999;
margin:0;
padding:0;
}

#nav-list li a:hover{
color:#FFF3CC;
}

#nav-list li a.no-pad {
padding:0;
margin:0;
float:right;
}

#nav-list .no-pad {
padding:0;
margin:0;
float:right;
}

#nav-list li a.highlight {
color:#FFFF66;
}

Edited April 10, 201313 yr by Precise Formwork

I think I've found one culpurit: My <div id="youtube"> </div> is fine with my css. But it has an inline style being pulled into the loaded html when the page is live:

 

html.css line 97 display:block;

 

I think that's what's causing the others to go to the next paragraph (so to speak).

 

How do I remove this demon?

add float:left to css for youtube div

Thanks MTeam, I had tried that many times; perhaps on a different div, but genuinely stumped as I'm sure I tried it a few times, I even put it in my first post; genuinely confused.

 

Ok thanks to MTeam that's sorted and I can play with padding later, how do I get the rest of these buttons to float next to the ShareThisEgg?

 

There must be a block on the egg?