CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Boris Kozarac
Boris Kozarac

Reputation: 635

Push div after content on smaller screens

I have a sidebar on page which should have background color all the way to the right side so it can't be inside container (or it can?). I am struggling with positioning it so that the content and sidebar don't overlap. But my question is how can I push the sidebar on smaller screens after content? (without having duplicate content) I am trying to mess a little as possible with Bootstrap code so that it doesn't break somewhere later

https://jsfiddle.net/vzoz53zm/

#sidebar {
  position: absolute;
  right: 0;
  width: 35%;
  max-width: 300px;
}


@media only screen and (max-width: 480px) {
  #sidebar {
    position: relative;
    width: 100%;
  }
}

<div id="sidebar">
  <p>
    SIDEBAR
  </p>
</div>

<div class="container">
  <div class="main">
        CONTENT
    </div>
</div>

enter image description here enter image description here

Upvotes: 0

Views: 47

Answers (2)

Jon Kyte
Jon Kyte

Reputation: 2020

You just need to move your HTML for the side bar after the container, and add top: 0; to your #sidebar styles. At the moment your sidebar appears first in the document, you have removed it from the document flow using absolute positioning, but when you insert it back in (setting it to position: relative;) it goes back into the document above the .container div.

See fiddle. https://jsfiddle.net/vzoz53zm/1/

Upvotes: 1

Chakravarty A
Chakravarty A

Reputation: 84

Add top:0 styles to the sidebar styles, it will meet the requirement.

Upvotes: 0

Related Questions