Responsive Sidebar WordPress

• SOLVED

I'm working on a responsive layout for a WordPress site, my code can be found at [[LINK href="http://codepen.io/anon/pen/usnxo"]]http://codepen.io/anon/pen/usnxo[[/LINK]]

I need to achieve the following:

1. Upon resize, .sidebar must <strong>always </strong> be under #content
2. .sidebar must have a fixed with (250px), while #content must fill in the remainder of the #container div (get rid of the 25% width for sidebar)
2. There should be no gaps between #content and .sidebar, #content must fill in the space not filled in by .sidebar
3. When .sidebar is floated<strong> left or right</strong>, .sidebar must still be under #content on resize and there should be no gaps between #content and .sidebar

The reason it needs to behave the same no matter which side the sidebar is on is because this is being added to a theme which allows the user to float the sidebar left or right. The site will also be responsive, which is why .sidebar must always fall under #content when the site is resized.

Answers (1)

2014-01-07

Sai kumar answers:

Hi,

For doing arranging the sidebar under #content on re-sizing, you just need to change the order in your code, that is change


<div id="container" class="clearfix">
<div class="sidebar"></div>
<div id="content"></div>
</div>


to


<div id="container" class="clearfix">
<div id="content"></div>
<div class="sidebar"></div>
</div>


and for making sidebar width fixed to 250px on resize, just change the css @media screen to


@media screen and (max-width: 1000px) {
#content { width:100%; float:none }
.sidebar{width:250px;; float:none}
}


Attaching the screenshot below

Please kindly give me the sample screenshot for your 2nd thing on your requirement, that is,

" 2. .sidebar must have a fixed with (250px), while #content must fill in the remainder of the #container div (get rid of the 25% width for sidebar) ".

---

siouxfan45 comments:

This is not what I wanted. The sidebar needs to be floated to the right of #content and the other requirements must also be met.

---

Sai kumar comments:

Do you want to do like this :