CODEWITHSUNDEEP
htmlcssresponsive-design
John Ruddell
John Ruddell

Reputation: 25872

Absolute position relative to a container that is also responsive

I am having some trouble positioning an element to its parent absolutely while keeping it responsive. Lets just say I have a responsive <section> that is 66% of the screen width and centered. I have a <nav> that is supposed to be stuck to the side of it at all times. However once your screen size is less than 992px, the width of that <section> is now 100%. The <nav> that is supposed to be always on the side is now supposed to be stuck to the top of the <section>...

All of this I can do and make it work properly... until you keep shrinking the size of the screen down where the <li> 's in the <nav> have to stack on top of eachother. When this happens the <nav> is now covering part of the <section> instead of remaining aligned with it.

I have made a codepen with an example of this. I gave the elements background colors so its easier to see whats happening. Any help or suggestions would be appreciated. Is there a way I can do this without controlling it with multiple media queries?

HTML

<section class="col-8-12 offset-2">
  <nav class="to-do-list">
    <ul>
      <li>Add Some1 Info</li>
      <li>Add Some2 Info</li>
      <li>Add Some3 Info</li>
      <li>Add Some4 Info</li>
    </ul>
  </nav>
  <div>
    <h1>Some Title Here</h1>
    <p>Some1 Stuff Here</p>
    <p>Some2 Stuff Here</p>
    <p>Some3 Stuff Here</p>
    <p>Some4 Stuff Here</p>
  </div>
</section>

CSS

html              { background-color: #1394cb; }
.col-8-12         { width: 66.66666667%; }
.offset-2         { margin-left: 16.66666667%; }
section           { float: left; margin-top: 250px; background-color: #0d2c41; position: relative; }
nav.to-do-list    { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p     { color: #FFF; padding-left: 15px; }
ul>li             { list-style: none; margin-right: 30px; }

@media only screen and (max-width: 992px){
  .col-8-12       { width: 100%; }
  .offset-2       { margin-left: 0; }
  nav.to-do-list  { left: 0; top: -50px; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
  ul>li           { display: inline-block; }
}

Upvotes: 2

Views: 2857

Answers (1)

Etheryte
Etheryte

Reputation: 25317

Simply use relative positioning at lower resolutions. Using absolute will break your layout because the element is removed from the regular flow and therefore doesn't affect other elements around it.
With minor other modifications:

html { background-color: #1394cb; }
.col-8-12 { width: 66.66666667%; }
.offset-2 { margin-left: 16.66666667%; }
section { float: left; margin-top: 250px; ; position: relative; }
section > div {background: #0d2c41; padding: 10px 0;}
nav.to-do-list { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p { color: #FFF; padding-left: 15px; }

ul>li { list-style: none; margin-right: 30px; }

@media only screen and (max-width: 992px){
  .col-8-12 { width: 100%; }
  .offset-2 { margin-left: 0; }
  nav.to-do-list { position: relative; left: 0; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
  ul>li { display: inline-block; }
}

Upvotes: 1

Related Questions