Sujan Shrestha
Sujan Shrestha

Reputation: 1040

Overlay one div on another side of div

I want to put two divs side to side but overlayed like this. I am putting this section in middle of my webpage so i cannot use top or bottom css styles after positioning absolute.

enter image description here

div.promoBanner__container {
  padding-top: 15px;
}

.promoBanner__image {
  position: absolute;
  background-size: cover;
  height: 100%;
  background-position: 50%;
  width: 76.25%;
}

div.promoBanner__content {
  background-color: rgba(17, 24, 54, .95);
}

div.promoBanner__content {
  position: absolute;
  left: 42%;
  right: 0;
  overflow-y: hidden;
  margin: 0;
  padding: 34px 22px;
}
<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
        alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>

  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

This is the additional edited portion of the question:

I want to place these two divs like below when they reach below 800 px. enter image description here I tried to achieve this design but couldnot implement. Please help.

Upvotes: 0

Views: 1056

Answers (4)

ThS
ThS

Reputation: 4783

To achieve the design shown in the image that you included, you could follow the next points :

  • add position: relative rule to .promoBanner__container.
  • remove the position: absolute rule from .promoBanner__image because you'll break your design as the height of .promoBanner__container will only be its padding as absolute positioning removes the element from the document flow so the height of the image included in .promoBanner__container will not be added to to .promoBanner__container. Doing so we'll be able to vertically center the .promoBanner__content element.
  • vertically center .promoBanner__content by the help of both top and transform properties.

The next snippet will explain more how to achieve the task :

* {
  box-sizing: border-box; /** padding and border are included in the width and height preventing some overflow cases (not all !) **/
}


.promoBanner__container {
  position: relative; /** add this so his children with absolute positionning are placed relative to it **/
  width: 100%;
  padding: 15px;
}

.promoBanner__image {
  /** removed absolute position **/
  height: 100%;
  width: 76.25%;
}

/** new rules for the image itself **/
.promoBanner__image > img {
  height: 100%;
  width: 100%;
}

.promoBanner__content {
  min-width: 400px;
  max-width: 45%; 
  /** change the above rules to your desired values. If no max-width is applyied, the element will have 100% of its parent's width **/
  position: absolute;
  right: 0; /** the right property is used to prevent overflowing and to position the banner content in the desired place without any hacky calculations **/
  /** next two rules are used to vertically align the banner content **/
  top: 50%;  
  transform: translate3d(0, -50%, 0);
  overflow-y: hidden;
  padding: 34px 22px;
  background-color: rgba(17, 24, 54, 0.95);
  z-index: 2; /** ensure it's on top **/
}
<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
        alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>

  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

EDIT :

Per what the OP has added to his post, here's how to make the design scale when the width is below or equal to 800px :

  • here's where the CSS media queries comes into play.
  • you have to reset some rules in order to achieve your desired task.

The next snippet contains the edited version with the 800px breakpoint rules :

* {
  box-sizing: border-box; /** padding and border are included in the width and height preventing some overflow cases (not all !) **/
}

.promoBanner__container {
  position: relative; /** add this so his children with absolute positionning are placed relative to it **/
  width: 100%;
  padding: 15px;
}

.promoBanner__image {
  /** removed absolute position **/
  height: 100%;
  width: 76.25%;
}


/** new rules for the image itself **/

.promoBanner__image>img {
  height: 100%;
  width: 100%;
}

.promoBanner__content {
  min-width: 400px;
  max-width: 45%;  /** change the above rules to your desired values. If no max-width is applyied, the element will have 100% of its parent's width **/
  position: absolute;
  right: 0; /** the right property is used to prevent overflowing and to position the banner content in the desired place without any hacky calculations **/
  /** next two rules are used to vertically align the banner content **/
  top: 50%;
  transform: translate3d(0, -50%, 0);
  overflow-y: hidden;
  padding: 34px 22px;
  background-color: rgba(17, 24, 54, 0.95);
  z-index: 2; /** ensure it's on top **/
}

/**
* rules to be applied when the width is less or equal to 800px. Change this per your requirements.
* some rules have to be reset in order to achieve your task.
* resize the screen to see the changes. It's better to copy the demo in a seperate file as the StackOverflow runnable snippet sandbox may not allow you to resize it.
**/

@media screen and (max-width: 800px) {
  .promoBanner__image {
    width: 100%;  /** resetting the width to 100% **/
  }
  .promoBanner__content {
    min-width: 100%;
    width: 100%; 
    /** resetting the width related rules to 100% so the two sections have the same width **/
    position: relative;  /** resetting the position rule to relative so the section remains in the document flow and we're still able to use top, bottom, right and left rules **/
    top: -45px; /** moving the section a little bit to the top. Change this per your requirements **/
    transform: translate3d(0, 0, 0); /** ressetting the transform rule **/
    overflow-y: hidden;
    padding: 34px 22px;
    background-color: rgba(17, 24, 54, 0.95);
    z-index: 2; /** ensure it's on top **/
  }
}
<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
            alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>
  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

learn more about the CSS media queries.

Hope I pushed you further.

Upvotes: 2

Marc Hauschildt
Marc Hauschildt

Reputation: 49

For the container:

  1. I would put position: relative; on the parent container.

For the image:

  1. background-size and background-position don't do anything without background-image. I would move the <img> tag from the HTML to the CSS.
  2. I would replace height: 100%; with a fixed height.
  3. I wouldn't position it absolute.
  4. The width property is not necessary since you're using col-md-8 (assuming you're using Bootstrap)

For the content:

  1. You don't want to use left and right together. Just pick one.
  2. overflow-y: hidden; is unnecessary unless you have a fixed height set.

Check out this Codepen and tell me if that's what you're looking for. You can comment out the borders and play around with the top and left properties of the content.

Upvotes: 1

Alexander Dixon
Alexander Dixon

Reputation: 874

If margin-left and margin-right are still viable styles to use, then, you can leverage those in tandem with z-index. Set the element that you want to be in the rear with a low z-index number like, z-index: 5; and the element that you want to sit in front with a z-index: 1005; or some other randomly large number.

Upvotes: 1

WebMarie
WebMarie

Reputation: 176

margin-top: 35px !important; would do the work

Upvotes: 1

Related Questions