Responsive layout stacking issue

[ashkirk]

I’m still learning CSS, so there is probably an easy explanation for this.

The website I’m building is not too complex. It has a header section, then a content area and a sidebar. When viewed on a small screen, I would like that content stacked in the same order (header, then content, and then sidebar at the bottom).

Now here is the issue. You will see here http://ashleykirk.ca/alderbuds that when the browser is resized, the side bar does not move to the bottom of the stack. This is happening because I have had to move the sidebar up in the HTML so that I can get it to float right beside the header. What makes this complicated is because the white background needs to be 100% width, but it also needs to move down as the intro pushes it down. So how can I float something to the right of something that has a width of 100%?

You need to see the link to understand.

Any tips, or even links to similar sites would be appreciated.

Thanks

[TheDoc]

Here’s a super simplified example: http://codepen.io/ggilmore/pen/c0148d11350d152a18abc89cac27ee3a

You’ll want to move down the sidebar in the HTML. You can position it beside the header by utilizing absolute positioning.

Drag the middle column in the link I posted to see what happens when the media query kicks in.

[Tom Houy]

I would avoid using absolute positioning as you are doing with the right side bar, particularly on a responsive site.

Another way to do it would be to put the content in it’s own block, then the right sidebar in it’s own block. Set the width for each to something like 75% and 25% respectively, and float both to the left. You could then get the overlap effect on the right sidebar by setting it’s top margin to a negative margin.

[Author]

Posts