- This topic is empty.
August 29, 2013 at 8:36 am #148506
Here is my codepen reduced test case: http://codepen.io/RonStrilaeff/pen/pKBdf
I have two fixed width sidebars on the outside edges of my page with the content autosizing between them … that works.
However, when the screen gets smaller, I want the sidebars pushed down below the content. That basically is the opposite of what my demo does. :-)
What I want to know is what kind of css magic do I have to do inside my media queries to make it behave that way? I’m thinking it has something simple to do with float or clear that I have not grasped yet. Or maybe I need to start with a different order to my divs in the html.
Any help is greatly appreciated.August 29, 2013 at 10:45 am #148519Paulie_DMember
Or maybe I need to start with a different order to my divs in the html.
Probably….remember floats operate in source order so if the have a sidebar on the left you can’t make it float below anything that comes after it.
This is something that flex-box will solve but the support for it is lacking at the moment.August 29, 2013 at 12:42 pm #148529
Yes I’m seeing that float and source issue more clearly now.
Chris’s clear distinction between float and absolute from this page
Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage…
gave me a clue about how to do what I want. I will absolutley postion them left, right and top in my wrapper until a certain size when they will then be made static and floated below the content. ding!!August 29, 2013 at 6:43 pm #148538jurotekParticipant
remember floats operate in source order so if the have a sidebar on the left you can’t make it float below anything that comes after it
Yes and no. It can be done with floats by first setting right negative margin 100% on your 3 columns and the source order can be anyway you like. See it at 768px width Here. Don’t know tho, if it can be done using fixed width on your left and right columns.August 30, 2013 at 5:33 am #148576
Thanks of your ideas.
Here is the solution I went with (a fork of the first codepen):
- put the content div first with specific margins to match sidebar widths
- made the sidebars normally fixed (top, left or right) within the wrapper containing both sidebars and the content
- at whatever width needed, made each sidebar static and float left or right (below content is natural because of source order) while removing the respective content margin
I’m very happy with this since it does not involve much code at all and seems pretty standard … ie: no “tricks”. :-)August 31, 2013 at 10:07 am #148657
Nice… very educational. Thanks.
- The forum ‘CSS’ is closed to new topics and replies.