Help with positioning absolute elements, how to give space between 2 items?

Question

I have 2 items, both with text boxes that are positioned absolute. When displayed on mobile I have the problem of the text boxes being cut off by the other element below it. Is there any way to give space between these items?

<!DOCTYPE HTML>
<html>

  <head>
    <title>Opium</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700italic|Playfair+Display:400,700italic|Adamina' rel='stylesheet' type='text/css'>
  </head>

  <body>

    <div class="container clearfix">

<div class="item_1">
  <div class="imgbox">
   <div class="inner_box">
     <h1>The journey</h1>
     <p class="box_text">within this brochure is one-of-a- kind and sure to delight those with a passion for fashion. The itinerary has been crafted based on expert insight and a keen attention to detail. 

We provide a unique experience for those who want to immerse themselves in life's most accessible art: </p>
<div class="italicfont">personal style.</div>
     <div class="golden_border"></div>
    </div>
  </div>
</div>

      <div class="item_2">
 <div class="imgbox">
     <div class="inner_box">
     <h1>The journey</h1>
     <p class="box_text">within this brochure is one-of-a- kind and sure to delight those with a passion for fashion. The itinerary has been crafted based on expert insight and a keen attention to detail. 

We provide a unique experience for those who want to immerse themselves in life's most accessible art: </p>
<div class="italicfont">personal style.</div>
     <div class="golden_border"></div>
   </div>
  </div>
</div>

</div>
     </body>
</html>

* {
  box-sizing: border-box;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 0.9em;
font-family: 'Playfair Display', serif;
  font-style: italic;
    font-size: 1.65em;
}

p {
  font-family: 'Adamina', serif;
  margin-bottom: 0;
  font-size: 0.8em;
}

.italicfont {
  padding: 0;
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  margin-bottom:20px;
} 

.container {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

.item_1 {
  width: 50%;
  float: left;
}

.item_2 {
  width: 50%;
  float: left;
}

img {
  max-width: 100%;
}

.imgbox {
  max-width: 397px;
  height: 398px;
  margin: 0 auto;
  background: #888;
  position: relative;
}

.inner_box {
  width: 55%;
  padding: 1.6em;
  background: rgba(255,255,255,0.94);
  box-shadow: 1px 2px 16px rgba(0,0,0,.2);
  position: absolute;
  top: 44px;
  right: 20px;
}

.golden_border {
  display: inherit;
  width: 103%;
  height: 101.5%;
  position: absolute;
  top: -15px;
  left: -15px;
  border: 6px solid #D9A528;
}

@media (max-width: 1000px) { 

.container {
  width: 100%;
}

h1 {
  font-size: 1.9em;
}

p {
  font-size: 1em;
}

.item_1,
.item_2 {
  width: 100%;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* directly related to floats */
  }
}

Answer 1 · 2016-04-20T22:30:01Z

April 20, 2016 10:30pm

The problem with absolute positioning is that it takes your element out of the normal document flow. You lose all browser assistance in managing the positions and sizes of adjacent and parent elements and have to do it yourself. As the columns get narrower, they get longer, but because of the absolute positioning of the inner_box containers, the imgbox around that needs a fixed size and doesn't expand.

As a quick band-aid, you could add something like this to your 1000px media query:

 .imgbox { height: 500px; }

...but then you still have a bit of a column-stretching issue between 1000px and 1024px. So, you could add yet another media query for that range, or...

I think you'd have a much easier time if you use margins and padding when possible and relative positions when needed. Remember, margins and relative offsets can be negative if you need them to be. Then you could remove the explicit sizes from the outer containers and allow them to adjust with the changes of the inner ones.

And finally, another positioning concept you might consider using is flexbox. You might not need any media queries at all using that.

Answer 2 · 2016-04-20T22:32:34Z

April 20, 2016 10:32pm

Try changing the position property in a media query. I created one for you in a codepen at a breakboint of 1000px width which is when the items start to "break" ie. lie on top of each other. So instead of doing that, they will stack vertically. Apply this media query to the bottom of your CSS code.

http://codepen.io/anon/pen/KzeJNJ

@media screen and (max-width: 1000px) {
  .item_1,
  .item_2 {
    position: relative;
    display: block;

  }

}

With media queries like this you can apply CSS to your code when certain conditions are met.

Welcome to the Treehouse Community

Looking to learn something new?

Rachael Farquharson

Rachael Farquharson

Help with positioning absolute elements, how to give space between 2 items?

2 Answers

Steven Parker

Steven Parker

Jonathan Grieve

Jonathan Grieve