I am trying to align two icons (the facebook and google+ icons) of my website found here. These little round icons can be seen just below the navigation bar at the top. The navigation bar is part of a class 'container_header', defined in the file 'stylesheet.css'.
The webpage' 'index.php' contains this code where the icons should be contained within the top container:
<div class ="container_header">
<div class="header_img"><a href="index.php" class="head"><img border="0" src="images/introspect-pictures_logo_header.png" alt="Home" width="185" height="28"></a></div>
<div class="header">
<a href="index.php" class="body">HOME</a>..........<a href="about.php" class="body">ABOUT</a>
<div id="social">
<a href="https://www.facebook.com" target="_blank"><img border="0" src="images/ic_fb.png" alt="Facebook"></a>
<a href="https://www.google.com" target="_blank"><img border="0" src="images/ic_gp.png" alt="Google+"></a>
</div>
</div>
</div>
And within 'stylesheet.css' the icons (within the 'social' class) have their properties defined as such (with '#'s):
#social {
float: right;
width: 60px;
text-align: right;
}
#social a {
float: right;
margin: 20px 0 0 5px;
}
#social a img {
width: 24px;
height: 24px;
border: 0;
}
The 'container_header' class properties are defined in the same file as:
.container_header{
width:800px;
margin:0 auto 0 auto;
padding:10px;
border:0px solid #000000;
border-radius: 5px;
color: #666666;
}
Could anyone please help me align them next to the navigation bar (next to 'About') so they are also contained within the container width (800px).
Many thanks,
Pete
Firstly, get rid of the width of .header. This is the reason why your social icon is not seating beside your menu item. Then remove margin-top from #social a.
EDIT: Using width:100%; for .header will also works.
Hope it'll helps.