CSS – hacer dos DIVs izquierda y alineado a la derecha en el interior principal DIV

En este estilo, vamos a aprender a hacer dos DIVs izquierda y alineado a la derecha dentro de un DIV Main el uso de CSS.

CSS Fragmento de código – hacer dos DIVs izquierda y alineado a la derecha en el interior 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>

Código fuente HTML con 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>

Resultado

CSS - Make Two DIVs Left and Right Aligned inside Main DIV - 4
clic Main DEMO y rarr;


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *