CODEWITHSUNDEEP
javascripthtmlcss
Eugeny89
Eugeny89

Reputation: 3731

Binding div to right border of another div

Please take a look at this jsfiddle. In html I have...

<div class='block1'>
  <p>text</p>
  <p>text2</p>
  <p>text 3</p>
  <div class='block2'>block2</div>
  <div class='block3'>
    <p>block3</p>
    <div class='block2'>block4</div>
  </div>
</div>

in CSS...

.block1 { color: red; width: 100px; border: 2px solid green; position: relative; }

.block2 {
  color: blue;
  width: 70px;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  left: 110px;
}

.block3 {
  color: blue;
  width: 100px;
  border: 1px solid black;
  position: absolute;
  top: 35px;
  left: 120px;
}

As you can see divs are positioned with left. So to place a div I need to get width of it's "parent", add width of gap and then set left property.

Is the same (I mean placing a div 10px right from right border of it's "parent" div) can be done with CSS only without updating left with javascript each time the width of parent div is changed?

PS. Yes, I thought of using float in CSS, but as you can see I can have several divs at right border of "parent" div, and gaps between divs can be different.

Upvotes: 1

Views: 1532

Answers (2)

csum
csum

Reputation: 2027

Set left: 100%; and margin-left to whatever spacing you want away from the right edge of .block1:

.block1 {
  color: red;
  width: 100px;
  border: 2px solid green;
  position: relative;
}

.block2 {
  color: blue;
  width: 70px;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  left: 100%;
  margin-left: 10px;
}

.block3 {
  color: blue;
  width: 100px;
  border: 1px solid black;
  position: absolute;
  top: 35px;
  left: 100%;
  margin-left: 20px;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241098

It sounds like you're looking for left: 100%.

Replace right: -115px and right: -80px with left: 100%. In doing so, you don't need to hardcode the width, and each element is positioned 100% to the left. This will place each element at the right side of their positioned parent element:

.block1 {
  color: red;
  width: 100px;
  border: 2px solid green;
  position: relative;
}
.block2 {
  color: blue;
  width: 70px;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  left: 100%;
}
.block3 {
  color: blue;
  width: 100px;
  border: 1px solid black;
  position: absolute;
  top: 35px;
  left: 100%;
}
<div class='block1'>
  <p>text</p>
  <p>text2</p>
  <p>text 3</p>
  <div class='block2'>block2</div>
  <div class='block3'>
    <p>block3</p>
    <div class='block2'>block4</div>
  </div>
</div>

Upvotes: 2

Related Questions