CODEWITHSUNDEEP
css
notQ
notQ

Reputation: 239

How can I give my right div margin top property here?

Hi,

I want the right div with red background some margin top property but still stay the same in the blue box. How can I achieve this? If I give margin top to the div now, it moves the whole blue div. 

<div id="wrapper" style="width: 100%;height: 100px; background-color: blue">
  <div id="left" style="background-color: green; height: 50px; width: 50px;  display: inline-block; float: left">
    left
  </div>
  <div id="right" style="background-color: red; height: 50px; width: 50px; margin-left: 50px;">
    right
  </div>
</div>

Upvotes: 0

Views: 31

Answers (3)

user6135434
user6135434

Reputation:

You can achieve this using 

#left {
  background-color: green; height: 50px; width: 50px; float: left;
}
#right {
  background-color: red; height: 50px; width: 50px; margin-top:20px; float:left; margin-left:20px;
}
#wrapper {
width: 100%;height: 100px; background-color: blue; display:inline-block;
}
<div id="wrapper">
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Upvotes: 0

Maharkus
Maharkus

Reputation: 2898

You need to use float on both elements (if at all. A nice alternative to using float is using flexbox). You also don't need the margin-left.

#right {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 50px;
  float: left
}

#left {
  background-color: green;
  height: 50px;
  width: 50px;
  float: left
}

#wrapper {
  width: 100%;
  height: 100px;
  background-color: blue
}
<div id="wrapper">
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Upvotes: 0

Minal Chauhan
Minal Chauhan

Reputation: 6158

Just Add float: left; and remove margin-left in red div

<div id="wrapper" style="width: 100%;height: 100px; background-color: blue">
  <div id="left" style="background-color: green; height: 50px; width: 50px;  display: inline-block; float: left">
    left
  </div>
  <div id="right" style="background-color: red; height: 50px; width: 50px; float: left; margin-top: 10px;">
    right
  </div>
</div>

Upvotes: 1

Related Questions