Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make sidebars move below content

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #148506
    Ron Strilaeff
    Participant

    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.

    #148519
    Paulie_D
    Member

    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.

    #148529
    Ron Strilaeff
    Participant

    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!!

    #148538
    jurotek
    Participant

    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.

    #148576
    Ron Strilaeff
    Participant

    Thanks of your ideas.

    Here is the solution I went with (a fork of the first codepen):
    http://codepen.io/RonStrilaeff/pen/oefav

    • 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

    Voila!

    I’m very happy with this since it does not involve much code at all and seems pretty standard … ie: no “tricks”. :-)

    #148657
    Ron Strilaeff
    Participant

    Nice… very educational. Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.