CODEWITHSUNDEEP
htmlcss
Pharetra
Pharetra

Reputation: 302

Aligning child outside of parent

So I've got a design that I want to implement in a website I'm working on. Basically, it's a background image (div a) that fills for example 70% of the available width, and another div (div b) containing text above div a. Problem is, both divs have to be aligned to respectively the left and the right of the page (there is a margin on both sides) and div a should always be larger in height than div b. Here is an image that hopefully makes it more clear:

https://i.imgur.com/sfHzvx3.png

Is it possible to implement this and if so, how? I've tried wrapping div b in div a, setting its position to relative and setting the right property, but I'm unable to get it to align on the right side for example.

By the way, the website is responsive and dynamic so it should also scale properly. As if it wasn't tricky enough ¯_(ツ)_/¯

Upvotes: 0

Views: 91

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

EDIT: Per your comment ("is it also possible when the height depends on the content in div b?"), new answer below:

.divs {
  overflow: auto;
  position: relative;
}

.div--a {
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 30%;
}

.div--b {
  background: lightblue;
  width: 70%;
  margin: 4% 0;
  position: relative;
  float: right;
}
<div class="divs">
  <div class="div--a"></div>
  <div class="div--b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at mauris at quam accumsan dictum. In vel mauris laoreet, varius quam nec, cursus sapien. Vivamus odio nisi, tristique blandit posuere in, iaculis sit amet lorem. Donec commodo vel eros ut tincidunt. </div>
</div>

Original answer:

Here's a quick attempt using absolute positioning on DIV B, and sizing calculated by percentages (to be scalable).

Let me know if you have any questions about how this works.

.divs {
  height: 200px;
  position: relative;
}

.div--a {
  background: red;
  width: 70%;
  height: 100%;
}

.div--b {
  background: blue;
  width: 70%;
  height: 80%;
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 1;
}
<div class="divs">
  <div class="div--a"></div>
  <div class="div--b"></div>
</div>

Upvotes: 1

Related Questions