Hello I have a problem this is the code for the exercise of theme 11 css Positionning -subtema clearing elements. The code provided by the page compiles perfectly but when I develop mine (I put everything the same as the example) the selector element “izquierda” it is superimposed over the header. However, when I add it: “margin-top: 70px;” the selector of the element “izquierda” is placed below and there is no problem. What I want to know is why the page does not seem to affect the one that I added that last but to me if I have lacked something in my code to do it without that line of code that adds or did i do something wrong? Thanks, I will value the answers.
code from the page :
<!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
<style>
div {
border-radius: 5px;
}
#encabezado {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.izquierda {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.derecha {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#pieDePagina {
height: 50px;
background-color: #69D2E7;
clear:both;
}
</style>
</head>
<body>
<div id="encabezado"></div>
<div class="izquierda"></div>
<div class="derecha"></div>
<div id="pieDePagina"></div>
</body>
</html>
my code (i comment what i add .You can see the difference when is running ) :
<!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
<style>
div {
border-radius:10px;
}
div{
border-radius:5px;
}
#header {
width:98.7%;
height:50px;
margin-top:-10px;
margin-bottom:10px;
background:coral;
}
.izquierda {
float:left;
background:skyblue;
width:150px;
height:300px;
margin-bottom:10px;
/* margin-top:70px;*/
}
</style>
</head>
<body>
<div id="header"><div>
<div class="derecha"><div>
<div class="izquierda"><div>
<div id="footer"><div>
</body>
</html>
