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
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?

Abhinav said...

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

Anonymous said...

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

Anonymous said...

Thank you! This thing helps me alot.

Anonymous said...

clean & easy => thanks

Anonymous said...

Exactly what I needed. Thank you.

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;

}

GENERAL BLOGS said...

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

Anonymous said...

thank you, this saved me time

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!

Sameer Desai said...

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