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

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

11 comments:

blogrammierer said...: This will only work if the text in the left and the text in the right box have the same length? Or err I?; July 17, 2009 at 2:15 AM
Abhinav said...: you have no idea how grateful i am. thanks a ton; February 10, 2010 at 2:26 AM
Anonymous said...: Thank you VERY much. I'm not an expert with CSS, and this has really saved me a lot of time.; May 27, 2010 at 9:17 AM
Anonymous said...: Thank you! This thing helps me alot.; November 24, 2010 at 8:29 AM
Anonymous said...: clean & easy => thanks; November 24, 2010 at 11:57 AM
Anonymous said...: Exactly what I needed. Thank you.; April 25, 2012 at 6:51 PM
RobertM said...: 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;

}; May 31, 2012 at 9:09 PM
GENERAL BLOGS said...: Thank you, it works smoothly. It is a fantastic idea to place div tags!; June 27, 2012 at 12:21 AM
Anonymous said...: thank you, this saved me time; October 24, 2012 at 10:23 PM
Anonymous said...: 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!; February 6, 2013 at 4:49 AM
Unknown said...: Superb! Thanks a lot! Really wanted this & finally got it!!; August 20, 2014 at 12:14 AM