ADVERTISEMENT
ADVERTISEMENT

CSS - Make Two DIVs Left and Right Aligned inside Main DIV

In this style, we will learn how to make two DIVs Left and Right Aligned inside a Main DIV using CSS.

Make Two DIVs Left and Right Aligned inside Main DIV

CSS:

<style>
   .outerDiv
   {
   background-color: #006699;
   color: #fff;
   height: 400px;
   width: 600px;
   margin: 0px auto;
   padding: 5px;
   }
   .leftDiv
   {
   background-color: #efefef;
   color: #000;
   height: 400px;
   width: 48%;
   float: left;
   }
   .rightDiv
   {
   background-color: #efefef;
   color: #000;
   height: 400px;
   width: 48%;
   float: right;
   }			
</style>

HTML Source Code with CSS:

<!--CSS - Make Two DIVs Left and Right Aligned inside Main DIV.-->
<html>
    <head>
        <title>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</title>
        <!--Example CSS-->
        <link href="ExampleStyle.css" type="text/css" rel="stylesheet" />
        <style>
            .outerDiv {
                background-color: #006699;
                color: #fff;
                height: 400px;
                width: 600px;
                margin: 0px auto;
                padding: 5px;
            }
            .leftDiv {
                background-color: #efefef;
                color: #000;
                height: 400px;
                width: 48%;
                float: left;
            }
            .rightDiv {
                background-color: #efefef;
                color: #000;
                height: 400px;
                width: 48%;
                float: right;
            }
        </style>
    </head>
    <body style="text-align: center;">
        <h1>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</h1>
        <div class="outerDiv">
            <div class="leftDiv">
                This is Left DIV.
            </div>
            <div class="rightDiv">
                This is Right DIV.
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

Result

make two divs left and right using css

CSS Tutorial & Examples »


ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.