Div size and position

Question

Div size and position

Navigation

#1 by (3 votes)

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 have to copy the code.

html css

asked by anonymous 05.08.2016 / 11:58

1 answer

Assign event click to button added to DOM with jQuery How to create a range button with pure javascript

score 3 · Accepted Answer

The divs by default has display block , this means that the div element will be placed below 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 a 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>

You can also put display:inline-block , but note that by default this will put a margin between the elements (I do not understand why, but it happens) that can be removed if you put font-size:0 on the parent. In the latter example, you can see this dropping font-size:0 from #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>