I'm studying div's and I'm having difficulty aligning the div's in the way I need it, as in the following image:
However,itlookslikethis:
#total {
background-color: red;
width: 300px;
height: 400px;
}
#pequeno {
background-color: yellow;
float: right;
width: 50px;
height: 60px;
}
#maior {
background-color: blue;
float: right;
width: 50px;
height: 100px;
}<div id="total">
<div id="pequeno"> </div>
<div id="maior"></div>
</div>
Can you help me?
Good friend, put the following code in your css:
#pequeno {
background-color: yellow;
float: right;
width: 50px;
height: 60px;
left: 0px;
top: 0px;
position: relative;
#maior {
background-color: blue;
float: right;
width: 50px;
height: 100px;
top: 60px;
left: 50px;
position: relative;Explanation, when using the "POSITION: RELATIVE" property, you can freely manipulate the "DIV", using the "TOP and LEFT" case to define the values.
Just add the 'clear: right' css to the top
#total {
background-color:red;
width:300px;
height:400px;
}
#pequeno {
background-color:yellow;
float:right;
width:50px;
height:60px;
}
#maior {
background-color:blue;
clear: right;
float:right;
width:50px;
height:100px;
}<html>
<body>
<div id="total">
<div id="pequeno"> </div>
<div id="maior"></div>
</div>
</body>
</html> clear:both was missing in div #maior
#total {
background-color:red;
width:300px;
height:400px;
}
#pequeno {
background-color:yellow;
float:right;
width:50px;
height:60px;
}
#maior {
background-color:blue;
float:right;
width:50px;
height:100px;
clear: both;
}<html>
<body>
<div id="total">
<div id="pequeno"> </div>
<div id="maior"></div>
</div>
</body>
</html>
#total {
background-color: red;
width: 265px;
height: 300px;
text-align: center;
font-size: 18px;
}
#pequeno {
background-color: yellow;
float: left;
width: 60px;
height: 60px;
left: 0px;
top: 60px;
position: relative;
margin: 2px;
font-size: 12px;
border: 1px solid #666666;
}
#maior {
background-color: #FFFFFF;
float: left;
width: 60px;
height: 60px;
top: 60px;
left: 0px;
position: relative;
margin: 2px;
font-size: 12px;
border: 1px solid #666666;
}
#cuerpo {
background-color: #FEF8E2;
float: left;
width: 260px;
height: 160px;
top: 65px;
left: 0px;
position: relative;
margin: 2px;
font-size: 12px;
border: 1px solid #666666;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="total">
<div id="pequeno"> Pequeño </div>
<div id="maior"> Mayor </div>
<div id="pequeno"> Pequeño </div>
<div id="maior"> Mayor </div>
<div id="cuerpo"> Cuerpo </div>
</div>
</body>
</html>