Aligning two div's next to each other using CSS

I have been asked this question several times - How to align two DIV's next to each other using CSS. Here's a simple solution that I have been using for quite a while now:


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


    <title></title>


    <style type="text/css">


    div.Outer {


        width: 350px;


        border:dashed 1px black;


        position: relative;


        clear: both;


        }


 


        div.InnerLeft {


        width: 50%;


        position: relative;


        background: #CCCCCC;        


        float: left;


        }


 


        div.InnerRight {


        width: 49%;


        position: relative;


        background: #AAAAFF;        


        float: right;


        }


    </style>


</head>


<body>


    <form id="form1" runat="server">


    <div class="Outer">


        <div class="InnerLeft">


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        </div>


        <div class="InnerRight">


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        </div>


    </div>


    </form>


</body>


</html>




OUTPUT

11 comments:

  1. blogrammiererJuly 17, 2009 at 2:15 AM

    This will only work if the text in the left and the text in the right box have the same length? Or err I?

    ReplyDelete
  2. AbhinavFebruary 10, 2010 at 2:26 AM

    you have no idea how grateful i am. thanks a ton

    ReplyDelete
  3. AnonymousMay 27, 2010 at 9:17 AM

    Thank you VERY much. I'm not an expert with CSS, and this has really saved me a lot of time.

    ReplyDelete
  4. AnonymousNovember 24, 2010 at 8:29 AM

    Thank you! This thing helps me alot.

    ReplyDelete
  5. AnonymousNovember 24, 2010 at 11:57 AM

    clean & easy => thanks

    ReplyDelete
  6. AnonymousApril 25, 2012 at 6:51 PM

    Exactly what I needed. Thank you.

    ReplyDelete
  7. RobertMMay 31, 2012 at 9:09 PM

    Hi, this works wonderfully, until I specify sizes.

    For instance:

    div.InnerLeft {
    margin-right:450px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;

    position: relative;

    background: #CCCCCC;

    float: left;

    }



    div.InnerRight {

    width: 425px;

    position: relative;

    background: #AAAAFF;

    float: right;

    }

    ReplyDelete
  8. GENERAL BLOGSJune 27, 2012 at 12:21 AM

    Thank you, it works smoothly. It is a fantastic idea to place div tags!

    ReplyDelete
  9. AnonymousOctober 24, 2012 at 10:23 PM

    thank you, this saved me time

    ReplyDelete
  10. AnonymousFebruary 6, 2013 at 4:49 AM

    I want to Thank you allot.
    I was stressing out because it didn't work out for me, but your code saved my @ss.


    Kudo's!

    ReplyDelete
  11. UnknownAugust 20, 2014 at 12:14 AM

    Superb! Thanks a lot! Really wanted this & finally got it!!

    ReplyDelete