Reputation: 1040
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.
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&mode=crop&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. I tried to achieve this design but couldnot implement. Please help.
Upvotes: 0
Views: 1056
Reputation: 4783
To achieve the design shown in the image that you included, you could follow the next points :
position: relative
rule to .promoBanner__container
.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..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&mode=crop&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
:
CSS
media queries comes into play.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&mode=crop&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
Reputation: 49
For the container:
position: relative;
on the parent container. For the image:
background-size
and background-position
don't do anything without background-image
. I would move the <img>
tag from the HTML to the CSS. height: 100%;
with a fixed height. col-md-8
(assuming you're using Bootstrap)For the content:
left
and right
together. Just pick one. 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
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