SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do i make social icons on header float left

    hi

    i have this design here:
    dev.wpcoder.co.il

    when you press the opening panel in the header there is social icons near the text how do i cause it
    float to left so it will look even like the text in the right

    image:
    http://img221.imageshack.us/img221/4172/44111357.png


    thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hello. I'm a bit confused. I go to that site and I see no social icons. In fact, that site looks hardly anything like your screenshot. Are you surey ou gave us the correct link?

    Seems like this will be a relatively easy fix, so no worries .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You just need to float .one-third to the left and .two-third to the right. However you will need to remove those mismatched and erroneous p tags that are messing everything up.

    Code:
    <div class="topcontent">
    		<p>
    		<div class="one_third">
    				<p> Copyright 2012 Your Company | <a href="#">RSS</a> | <a href="#">Email</a></p>
    				<p>
    		</div>
    		<div class="two_third column-last">
    				<p style="text-align: right;"><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/twitter.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/facebook.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/forrst.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/dribbble.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/cargo.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/linkedin.png" style="display:inline"></a><a href="#"><img src="http://www.designcirc.us/responsivetheme/wp-content/themes/aware/images/icons/posterous.png" style="display:inline"></a></p>
    				<p>
    		</div>
    		<div class="clear"></div>
    		</p>
    </div>
    Not keen on those class names or is this another of those impossible to fathom grid layouts that layer complexity on top of something relatively simple?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •