CSS - How to manipulate Div’s?

Asked

Viewed 281 times

2

I’m doing div’s and I’m having a hard time lining up div’s the way I need to, like in the following picture :
inserir a descrição da imagem aqui

But it’s getting like this :

#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??

css html5

  • Currently, there are better techniques for element positioning. I would say for you to use float in very specific cases.

4 answers

3

Just add 'clear:right' to the larger’s css'

			#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>

  • Wooow, perfect !! did not know this command, he plays everything to the extreme right ??

2

Lacked a clear:both in the 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>

  • It worked!! what makes this command clear??

  • The clear property is important for controlling the behavior of floating elements. You clear the floating property of the element.

  • thank you Diego !!

1


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, by using the property "POSITION: RELATIVE", you can freely manipulate the "DIV", using in the case "TOP and LEFT" to define the values.

  • Aaah yes, I get it, what’s the difference from position:relative to clear??

  • clear, just as you commented makes automatic position management, while with relative you have the option to choose exactly where you will be staying.

  • 1

    Remembering that it would be better to use the "%" system instead of "px" for your site/app to adapt to different sizes of monitors.

  • Okay!! Thanks for the tip Diego !!

  • Dispo, your doubt helped me too, after all I had to research to answer her kkk

-1

#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>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.