Boris Kozarac Boris Kozarac - 4 months ago 6
HTML Question

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

Answer

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/

Comments