1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how to move objects to the right in html?

Discussion in 'BlackHat Lounge' started by Lauriat, May 24, 2013.

  1. Lauriat

    Lauriat Power Member

    Joined:
    Oct 23, 2011
    Messages:
    600
    Likes Received:
    198
    I have social network buttons, i dont know how to move them to the right.
    Any help appreciated.

    Code:
    <div class="sse_buttons">
    <div class="simplesocialexpandalble">
    <a class="sse_button_google"></a>
    <a class="sse_button_facebook_like"></a>
    <a class="sse_button_tweet"></a>
    <a class="sse_button_pinterest_pinit"></a>
    </div>
    </div>
    
     
  2. Izzma

    Izzma Regular Member

    Joined:
    Jan 29, 2012
    Messages:
    293
    Likes Received:
    197
    Location:
    Canada
    Read up on CSS

    what you would want is something like this

    .sse_buttons {float:right; width:[WIDTH]px; height:[HEIGHT]px;}
     
    • Thanks Thanks x 1
    Last edited: May 24, 2013
  3. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    Depends on what you need.

    #1:
    Code:
    <div class="sse_buttons">
    <div class="simplesocialexpandalble">
    <a class="sse_button_google"></a>
    <a class="sse_button_facebook_like"></a>
    <a class="sse_button_tweet"></a>
    <a class="sse_button_pinterest_pinit"></a>
    </div>
    </div>
    <div class="clear"></div>
    
    Code:
    .sse_buttons {
    width: ###px;
    height: ###px;
    float: right;
    }
    .clear {
    clear: both;
    }
    
    #2:
    Code:
    <div class="sse_buttons">
    <div class="simplesocialexpandalble">
    <a class="sse_button_google"></a>
    <a class="sse_button_facebook_like"></a>
    <a class="sse_button_tweet"></a>
    <a class="sse_button_pinterest_pinit"></a>
    </div>
    </div>
    <div class="clear"></div>
    
    Code:
    .sse_buttons {
    width: ###px;
    height: ###px;
    float: left;
    }
    .clear {
    clear: both;
    }
    
    #3:
    Code:
    <div class="sse_buttons">
    <div class="simplesocialexpandalble">
    <a class="sse_button_google"></a>
    <a class="sse_button_facebook_like"></a>
    <a class="sse_button_tweet"></a>
    <a class="sse_button_pinterest_pinit"></a>
    </div>
    </div>
    
    Code:
    .sse_buttons {
    width: ###px;
    height: ###px;
    position: relative;
    right: ##px;
    top: ##px;
    }
    

    #4:
    Code:
    <div class="sse_buttons">
    <div class="simplesocialexpandalble">
    <a class="sse_button_google"></a>
    <a class="sse_button_facebook_like"></a>
    <a class="sse_button_tweet"></a>
    <a class="sse_button_pinterest_pinit"></a>
    </div>
    </div>
    
    Code:
    .sse_buttons {
    width: ###px;
    height: ###px;
    position: absolute;
    right: ##px;
    top: ##px;
    }
    


    Floats make the element "float" to location and other elements can squeeze up against it. You could add padding and margin to change the effects.
    Absolute positions are fixed based on screen size (not to be confused with "fixed" positioning which follows the viewer)
    Relative positions are relative to the container
    Top/right/bottom/left declarations are to push the element from that spot and can be positive or negative. -50px will push it 50px to the to right. 50px will push it 50px to the left.
     
    • Thanks Thanks x 1