Aplicacion a contenido envolvente de un elemento flotante
Publicado por Israel (51 intervenciones) el 03/09/2021 17:18:00
Genero un titular y despues de él dos elementos flotantes, una imagen (a la izquierda) y una barra lateral (en este caso un <div>, a la derecha). El parrafo de después logicamente envuelve a los dos elementos flotantes por el medio y debajo de ellos. Todo bien hasta ahí...........
Pero a la hora de aplicar un margin-left al parrafo para que genere un espacio horizontal izquierdo respecto del <body>, no tiene efecto. Sabe alguién por qué???
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flotantes:imagen y barra lateral</title>
<style>
html{
background-color:white;}
body{ width:750px;
font-size:40px;
margin:0 auto;
background-color:blue;}
h1{margin:10px;}
img{
width:40%;
float:left;
margin-right:15px;}
.barraLateral{ background-color:red;
padding:10px;
width:30%;
float:right;
margin-left:5px;}
.principal{ background-color:yellow;
margin-right:50px;}
h2, .secundario, .principal{
margin:0;}
</style>
</head>
<body>
<h1>Titular principal</h1>
<img src="paisaje.jpg">
<div class="barraLateral">
<h2>Barra lateral</h2>
<p class="secundario">Esto podria ser una barra lateral con informacion adicional </p>
</div>
<p class="principal">Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal</p>
</body>
</html>
Un saludo.
Pero a la hora de aplicar un margin-left al parrafo para que genere un espacio horizontal izquierdo respecto del <body>, no tiene efecto. Sabe alguién por qué???
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flotantes:imagen y barra lateral</title>
<style>
html{
background-color:white;}
body{ width:750px;
font-size:40px;
margin:0 auto;
background-color:blue;}
h1{margin:10px;}
img{
width:40%;
float:left;
margin-right:15px;}
.barraLateral{ background-color:red;
padding:10px;
width:30%;
float:right;
margin-left:5px;}
.principal{ background-color:yellow;
margin-right:50px;}
h2, .secundario, .principal{
margin:0;}
</style>
</head>
<body>
<h1>Titular principal</h1>
<img src="paisaje.jpg">
<div class="barraLateral">
<h2>Barra lateral</h2>
<p class="secundario">Esto podria ser una barra lateral con informacion adicional </p>
</div>
<p class="principal">Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal Esto seria el contenido principal
Esto seria el contenido principal Esto seria el contenido principal</p>
</body>
</html>
Un saludo.
Valora esta pregunta
0
