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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

10 Responses to "Aligning two div's next to each other using CSS"
  1. blogrammierer said...
    July 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?

  2. Abhinav said...
    February 10, 2010 at 2:26 AM

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

  3. Anonymous said...
    May 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.

  4. Anonymous said...
    November 24, 2010 at 8:29 AM

    Thank you! This thing helps me alot.

  5. Anonymous said...
    November 24, 2010 at 11:57 AM

    clean & easy => thanks

  6. Anonymous said...
    April 25, 2012 at 6:51 PM

    Exactly what I needed. Thank you.

  7. RobertM said...
    May 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;

    }

  8. GENERAL BLOGS said...
    June 27, 2012 at 12:21 AM

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

  9. Anonymous said...
    October 24, 2012 at 10:23 PM

    thank you, this saved me time

  10. Anonymous said...
    February 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!

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions