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

Home Forums CSS Pure CSS left sidebar

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #199933

    I need to implement the left sidebar which should be adaptive for small screens.
    The sidebar has a fixed width, located on left and the page direction is right-to-left.

    My HTML layout is as follow:

    <div class="clearfix"><!-- container -->
        <aside class="left-sidebar">
        <div class="content-holder">
    </div><!-- /container -->


    .left-sidebar { width: 250px; float:left; margin-right: 30px; }
    .content-holder { width: 100%; }

    Thus the content fills the remaining space.

    I need this sidebar under the content section on devices with max-width 960px.

    My implementation:


    @media (max-width: 960px) {
        .left-sidebar { float: none; width: 100%; }


    <script type="text/javascript">
        jQuery( document ).ready(function( $ ) {
            $(window).bind("resize load", function(){
                if($(window).width() > 960 && !$("aside.left-sidebar").hasClass("at-left")){
                }else if($(window).width() <= 960 && !$("aside.left-sidebar").hasClass("at-bottom")){

    It works well, but I feel that it’s clumsy, so I am wondering if there is a CSS-only solution.

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