How i can make align in two rows?

HTML & CSS
1

hi friends
i attached a reference picture, smashinghub plz open my website and see the sidebar , you can see the google+ and facebook like buttons , they are overlap to each other, plz i want to make into 2 row… like

  1. Google + like
  2. facebook like

You can also see the facebook fan page box , i want to make centre as well, plz tell me way and code or trick, to make align like above
thanks,waiting

2

Hi,

you can start by setting up .fblike:
.fblike {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: -7px;
overflow-x: hidden;
overflow-y: hidden;
width: 110px;
display: inline-block;
}

and
.fbplus {
width: 290px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 13px;
text-align: center;
}

And then add to g+ style attribute:
display: inline-block;

And finally to make them go on separate lines: add after the FB’s closing div: <br />

3

As you given me code, i placed on CSS

regarding sidebar,

<div style=“clear:both;”></div>
<p><u><font size=“1” face=“Arial”>
<a href=“http://buysellads.com/buy/detail/21275”>ADVERTISE HERE</a></font></u></p>
<div style=“clear:both;”></div>
<h2 class=“hsidebar”>Subscribe to Smashing Hub</h2><br>

&lt;div class="social-widget"&gt;

<div class=“fbplus”>
<div class=“fblike”><iframe src=“//www.facebook.com/plugins/like.php?href=http://smashinghub.com&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21” scrolling=“no” frameborder=“0” style=“border:none; margin-left:25px; overflow:hidden; width:400px; height:21px;” allowTransparency=“true”></iframe></div>

<!-- Place this tag where you want the +1 button to render –>
<g:plusone href=“http://smashinghub.com”></g:plusone>

</div>

what to do what g+ and other things, because i could not able to understand example you given to me

4

Hi,

in your file style.css you have defined 2 times .fblike and .fbplus. Remove the duplicates and apply the changes from my previous post.
And then change your html as shown bellow:


<div style="clear:both;"></div>

<p><u><font size="1" face="Arial">

<a href="http://buysellads.com/buy/detail/21275">ADVERTISE HERE</a></font></u></p>

<div style="clear:both;"></div>

    <h2 class="hsidebar">Subscribe to Smashing Hub</h2><br>



    <div class="social-widget">



<div class="fbplus">

<div class="fblike"><iframe src="//www.facebook.com/plugins/like.php?href=http://smashinghub.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; margin-left:25px; overflow:hidden; width:400px; height:21px;" allowTransparency="true"></iframe></div> 
<br />

<!-- Place this tag where you want the +1 button to render -->

<g:plusone href="http://smashinghub.com"></g:plusone>



</div>
5

thanks for your reply, now its appeared like this

plz fix this too
i remove duplicate code in stylesheet

6

Hi,

you haven’t removed the second .fblike.
And then again:


.fblike {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: -7px;
overflow-x: hidden;
overflow-y: hidden;
width: 110px;
display: inline-block;
}

and 
.fbplus {
width: 290px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 13px;
text-align: center;
}
7

[QUOTE=sularome;4993565]Hi,

hi again

sir i removed both codes on stylesheet, now its looks like this

sir, facebook like +g on same line, allign, plz tell me code to fix

and facebook fan box , as centre as well smashinghub… thanks waiting

8

i ve removed both codes from stylesheet , but it has not yet fixed sir

9

add this to your css:


.fblike{
display: inline-block;
width: 110px;
}
10

sir good, and what about facebook fan page … i need to centre as well

11

Can’t you put margin-left: 25px; ?

12

sir this is a code , Can you edit, plz, i dont know programming even basic :frowning:

<iframe src=“//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsmashinghub&width=292&colorscheme=light&show_faces=true&border_color&stream=false&header=false&height=258” scrolling=“no” frameborder=“0” style=“border:none; overflow:hidden; width:292px; height:258px;” allowTransparency=“true”></iframe>

13 

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsmashinghub&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;margin-left:25px;" allowTransparency="true"></iframe>

This should work.

14

thanks all fixed :slight_smile: