creating sidebars

Post Reply
Lumpy Burgertushie
Posts: 17
Joined: 1/13/2018 4:06 pm

creating sidebars

Post by Lumpy Burgertushie » 3/20/2018 10:53 am

Arty wrote:Best solution is to change structure. Wrap content in additional div and move it before sidebars then wrap it all in one additional div, so code would look like this:

Code: Select all

<div id="main-content">
    <div id="content-wrapper"> 
        <div id="content">content here </div>
    </div>
    <div id="sidebar-left"> left code </div>
    <div id="sidebar-right"> right code </div>
</div>
then add style like this:

Code: Select all

#main-content:before, #main-content:after { content: ''; display: table; clear: both; }
#sidebar-left { width: 236px; float: left; }
#sidebar-right { width: 236px; float: right; }
#content-wrapper { width: 100%; float: left; margin: 0 -236px; }
#content { padding: 0 246px; }
@media (max-width: 800px) {
    #content-wrapper { margin-right: 0; }
    #content { padding-right: 0; }
    #sidebar-right { float: none; margin: 0 auto; }
}
@media (max-width: 600px) {
   #content-wrapper { margin-left: 0; }
   #content { padding-left: 0; }
   #sidebar-left { float: none; margin: 0 auto; }
}

Post Reply