Good day, dear coding gurus. Please do not kick much, I am not a programmer, I know HTML at an amateur level, I made a Wordpress site, this is my first experience. The percentage of failures reaches 80%, so I decided to thoroughly rework the blocks on the page and implement “Useful” “It will be interesting for you” in the sidebars.

Initially, there was one sidebar id="secondary" , I added the second id="leftbar" and then a brain explosion began, which I have been trying to solve for a week. I chose an adaptive template at one time, and I modify it.

Initially, I wanted to do this, and on pure HTML \ CSS:

enter image description here

But I realized that this is very problematic on pure HTML \ CSS. Now I am thinking of doing this:

enter image description here

But I really do not want to give up the idea of ​​moving the left sidebar to the left area. How can this be implemented through JS? Type with 1025px to transfer the left sidebar (DIV block) to the left edge of the page? With JS is not familiar at all, if possible, with some explanation what and where to insert. Just in case, once again, I note that the design is adaptive (rubber), and, for example, may change when the gadget flips (smart, tablet). I also think it would be important to say that jquery.js is connected on all pages.

Just in case, I attach the sample page https://jsfiddle.net/3ypmy3o4/

    1 answer 1

    If possible, use the Flexbox in CSS. Read the manual . Using it is quite easy to create your original layout. Notice the flex-wrap and order properties.

    Made an example on codepen .

    HTML

     <div class="wrapper"> <div class="header">Header</div> <div class="main"> <div class="content">Content</div> <div class="left-sidebar">Left</div> <div class="right-sidebar">Right</div> </div> </div>

    CSS

     * { border: 1px solid; } html, body, .wrapper { height: 100%; margin: 0; padding: 0; } .header { height: 50px; background: green; margin: 10px; } .left-sidebar, .right-sidebar, .content { height: 100px; margin: 10px; background: azure; } .main { display: flex; flex-wrap: wrap; } .content { flex-grow: 2; order: 1; } .left-sidebar, .right-sidebar { flex-grow: 1; } .left-sidebar { order: 0; } .right-sidebar { order: 2; } @media screen and (max-width: 1024px) { .header { background: blue; } .main { display: block; } .content { float: left; height: 300px; min-width: 60%; } .left-sidebar, .right-sidebar { min-width: 33%; float: right; } } @media screen and (max-width: 768px) { .header { background: red; } .main { display: block; } .content { float: none; height: 300px; min-width: 100%; } .left-sidebar, .right-sidebar { min-width: 100%; float: none; } }
    • Thank you for responding. I tried to adapt the Flexbox to my template with a complex structure, but it didn't work out for me. Everything moves off and runs away incomprehensibly where. I have been suffering with this for a week now, from morning to evening, my eyes ache like that. To say that this affects motivation, it is nothing to say. Already I want to just quit a blog with 10 visitors per day and forget it all like a bad dream. Maybe there is still a short JS? Who put in a set style from where and what to move and forget it all like a bad dream !!! - UserUser-name
    • updated the answer, added a link to the codepen - Alex