Jack Johansson Jack Johansson - 14 days ago 6
CSS Question

how to set up responsive columns with pure CSS?

I'm using the following HTML markup to make 3 columns in my page:

<div id="container">
<div id="sidebar-left"></div>
<div id="content"></div>
<div id="sidebar-right"></div>
</div>


These columns are styled with this CSS:

#container{width:100%}
#sidebar-left, .sidebar-right{width:25%;float:left}
#content{width:50%;float:left}


The output result is similar to the left image at <1200px width.

https://i.stack.imgur.com/VEopK.jpg

Now i'm trying to make a responsive design for widths less than 1200px, similar to the right image, but i can't get the content DIV on top of the sidebars. I've have tried to change the order of DIVs, but no help.

Is there anyway to do this?

Answer

I think that using flexbox would be the best thing; if you want support for lesser browsers, you could do something like this:

   #content{background:green;width:100%;}
   #sidebar-right, #sidebar-left{
     background:pink;
     width:50%;float:left;
   }
   
   @media only screen and (min-width:1200px){
    #sidebar-right, #sidebar-left{ 
      width:25%;
    }
    
    #content{
      width:50%;
      margin-left:25%;
      float:left;
    }
    
    #sidebar-left{
      margin-left:-75%
    }
    
   } 
<div id="container">
    
    <div id="content"><p>Lorem ipsum dolor sit amet consectetuer Quisque Ut Curabitur cursus sem. Integer volutpat eget tempor pulvinar Curabitur interdum Curabitur justo morbi tincidunt. Nec diam mauris adipiscing Integer Vestibulum tincidunt Suspendisse id mauris tortor. Fusce Aenean ac Lorem lorem quis tellus eu enim In id. Congue rhoncus eu Duis libero In cursus congue enim nibh laoreet. Donec nunc tellus Ut Nullam interdum dapibus malesuada turpis vitae.</p>
<p>Dui Quisque magnis interdum In ante interdum dignissim Vestibulum elit wisi. Ut Sed justo adipiscing In Vestibulum nulla et congue Nunc feugiat. Adipiscing sit id tortor ultrices vel rhoncus quis nunc nec ut. Lacus adipiscing quis tortor ornare eu Phasellus Aenean eleifend auctor pede. Porttitor tempus quam sapien adipiscing Nullam diam dolor interdum nibh adipiscing. Vestibulum dolor nibh fringilla id Vestibulum pulvinar Morbi consectetuer ut In. Malesuada sollicitudin.</p>
</div>
    <div id="sidebar-left"><p>In augue malesuada amet Phasellus ipsum orci lobortis arcu aliquam wisi. Nibh nisl lacinia Mauris neque Nam id et congue elit Integer. Mauris risus In Aliquam vitae ut est vel ut feugiat enim. Laoreet urna Vestibulum suscipit aliquam orci libero risus elit ut eget. Nibh tempus tristique tincidunt eu nibh ridiculus eleifend massa orci Aenean. Lacinia odio Vivamus.</p>
</div>

    <div id="sidebar-right"><p>Tincidunt wisi Aenean at lorem turpis gravida Curabitur neque magna sed. Orci et dictumst ligula volutpat amet mauris leo lacus ac ante. Sed fermentum ac leo nunc laoreet sociis massa platea Sed ultrices. Elit vitae tempus interdum a mollis cursus elit senectus Quisque sed. Adipiscing id semper dis sed justo congue quis tincidunt vel sit. Vitae.</p>
</div>

</div>

Comments