Wednesday, April 20, 2011

What is the best way to left align and right align two div tags?

What is the best way to right align and left align two div tags on a web page horizontally next to each other? I would like an elegant solution to do this if possible.

From stackoverflow
  • <style>
    #div1, #div2 {
       float: left; /* or right */
    }
    </style>
    
  • (excuse the inline styles :))

    <div style="float: left;">Left Div</div>
    <div style="float: right;">Right Div</div>
    
  • As an alternative way to floating:

    <style>
        .wrapper{position:relative;}
        .right,.left{width:50%; position:absolute;}
        .right{right:0;}
        .left{left:0;}
    </style>
    ...
    <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    

    Considering that there's no necessity to position the .left div as absolute (depending on your direction, this could be the .right one) due to that would be in the desired position in natural flow of html code.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.