Size and position of div

Question

Size and position of div

Asked 8 years, 4 months ago

Viewed 1,967 times

0

Hello everyone I’m trying for a div next to another div as you can see below, I’m not sure what I’m doing wrong here’s the code:

.div {
    background-color: #cecece; 
    margin-right: 700px; 
    padding-bottom: 424px;
    border: inset
}

<!DOCTYPE html>
<html>
<head>
	<title>C#</title>
</head>
<body>
  <div class="div">
   
  </div>
  <div style="background-color: #000; margin-left: 400px; padding-bottom: 424px">
   w
  </div>
</body>
</html>

The code is not performing very well in this post so if you need to see the result in this page you must copy the code.

1 answer

Browser other questions tagged html css

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

by Miguel • **29,306** points · Answer 1 · 2016-08-05T10:10:03+00:00

As divs by default have display block, this means that the div will be placed under the previous element:

EX:

div {
  height: 100px;
  width: 50px;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}

<div id="div1"></div>
<div id="div2"></div>

To remedy this you can put one float:left:

div {
  height: 100px;
  width: 50px;
  float: left;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}

<div id="div1"></div>
<div id="div2"></div>

Can also put display:inline-block, but note that by default this will put a margin between the elements (I don’t understand why, but it happens) that can be removed if put font-size:0 in the father. In this last example, you can see that withdraw font-size:0 of #caixa_pai

#caixa_pai {
  font-size:0;
}
.caixa_filho {
  height: 100px;
  width: 50px;
  display: inline-block;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}

<div id="caixa_pai">
  <div class="caixa_filho" id="div1"></div>
  <div class="caixa_filho" id="div2"></div>
</div>