CODEWITHSUNDEEP
htmlcss
Oful
Oful

Reputation: 65

Margin/padding comes outside a div

I have tried to use margin/padding (top 80% / bottom 20%) to position text about 20% above the bottom of the div. However it looks like it does not work this way, the margin/padding simply comes out of box instead of positioning the text as wanted.

I can position it at the center of the image using margin: 20% but I want to position it 20% above the bottom line as elseway the text keeps on moving around when I change resolution, sometimes it hides completely due to overflow.

Any suggestions on how to align just slightly above the bottom of the div? Preferably without using position: absolute as this setting messed up everything else for me.

Fiddle

.featured_title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: auto;
    margin-top: 80%; /* this needs to be removed in order for text to become visible as currently it's hidden due to overflow:hidden */ 
    margin-bottom: 20%;
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
    overflow: hidden;
}

.banner {
    max-height: inherit;
}

.banner {
    margin:auto;
    width: 80%;
    display: block;
    max-height: 500px;
    overflow: hidden;
}

.featured_image {
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%
}
<div class=browser>
    <div class="featured_box">
        <div class="banner" onclick="location.href=">
            <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
                <p class="featured_title">Text goes here</p>
            </div>
        </div>
    </div>
    <div class=browser>

Upvotes: 4

Views: 3042

Answers (4)

Ilimkan Omurzakova
Ilimkan Omurzakova

Reputation: 313

Specifying px instead of percentage in this case will fix the issues.

You can view on codepen as well - https://codepen.io/Ilima/pen/gzVWJB?editors=1100 

.featured_box {
  max-height: 500px;
  overflow: hidden;
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.featured_image {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
}
.featured_image:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

.featured_title{
  margin-top: 360px;
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: #fff;
  text-align: center;
}
<div class="featured_box">
  
  <div class="featured_image">
      <p class="featured_title"> Text goes here </p>
  </div>
</div>

<div class="browser"></div>

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

here is the code for you:

<body>

      <div class="container-fluid img-responsive">
        <div class="row">
          <div class="col-4 col-sm-4 " ></div>
          <div class=" col-4 col-sm-4" ><img src="4.jpg"> </div>
       </div>
       <div class="row">
        <div class=" col-4 col-sm-4 " ></div>
        <div class=" col-4 col-sm-4" >text goes here</div>
       </div>
      </div>

</body>

you can resize the window to see responsiveness: https://jsfiddle.net/3myfa6fe/

and mind you I am using bootstrap for it .Please add the required libraries for it from CDN bootstrap page.this is a very small code understandable rather than taking up those big html css code pieces.all the best.

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9338

Is this what you want?

I added the following CSS to .featured-image:

display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 20%;


* {
  box-sizing: border-box;
}

.featured_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  font-size: 4vw;
  color: #000;
  text-align: center;
  color:white;
  
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
  max-height: 500px;
  overflow: hidden;
}

.banner {
  max-height: inherit;
}

.banner {
  margin: auto;
  width: 80%;
  display: block;
  max-height: 500px;
  overflow: hidden;
}

.featured_image {
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20%;
}
<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

Upvotes: 2

Asnau Nauticas
Asnau Nauticas

Reputation: 346

I have added "top" and "position" element to your code and removed margins Is this what you are looking for? I mean Text just above the div of your Image

 

   * ..featured_title {
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;   <!---added position -->
    top: 450px;           <!-- added top --> 
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;

}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
overflow: hidden;
}

.banner {
max-height: inherit;
}

.banner {
margin:auto;
  width: 80%;
  display: block;
max-height: 500px;
overflow: hidden;
}

.featured_image {
overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
height: 500px;
width: 100%
}
<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

Upvotes: 2

Related Questions