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
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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!!