Hello. I'm trying to modify this template to have 4 columns as an exercise. It almost works but I can't make the thirdSection to be under the secondSection when there is not enough width. Please, can you help me? I have uploaded the index.html + screen.css in a zip file because when pasting it here it does not keep the spaces.
Nothing personal but I will never unzip an unknown zip folder. You should have posted your code here between [ code ] [ /code ] I don't know if @deathshadow has a four-column layout on his site, but he might: http://www.cutcodedown.com/ I found this example. The code could be cleaned up somewhat, but the transitions are really nice there: http://codepen.io/CesarGabriel/pen/vHdLJ
Thanks for the input. This template has better markup, a content section and fixed width extra columns. I'm using it to practice with CSS. It's based on "responsive" example. I've moved the content section to the left and I'm trying to understand how to add as much sections as desired. index.html: <!DOCTYPE html><html lang="screen.css" media="#"> Site Title <span>-</span><small>Put a Tagline Here</small></a></h1><ul id="#">Home</a></li><li><a href="#">Articles</a></li><li><a href="#">Forums</a></li><li><a href="#">Links</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul><!-- #top --></div><div class="#">Featured Item 1</a></li><li><a href="#">Featured Item 2</a></li><li><a href="#">Featured Item 3</a></li><li><a href="#">Featured Item 4</a></li><li><a href="#">Featured Item 5</a></li><li><a href="#">Featured Item 6</a></li><li><a href="#">Featured Item 7</a></li><li><a href="#">Featured Item 8</a></li></ul><!-- #featured.subSection --></div><div id="#">Recent Item 1</a></li><li><a href="#">Recent Item 2</a></li><li><a href="#">Recent Item 3</a></li><li><a href="#">Recent Item 4</a></li><li><a href="#">Recent Item 5</a></li><li><a href="#">Recent Item 6</a></li><li><a href="#">Recent Item 7</a></li><li><a href="#">Recent Item 8</a></li></ul><!-- #recent.subSection --></div><!-- .firstSection --></div><div class="#">Item1</a></li><li style="#">Item3</a></li><li style="#">Item2</a></li><li style="#">Item8</a></li><li style="#">Item6</a></li><li style="#">Item5</a></li><li style="#">Item7</a></li><li style="#">Item4</a></li></ul><!-- #tagCloud.subSection --></div><div id="someOtherText" class="subSection"><h2>Some other text</h2><p> Pellentesque scelerisque tellus sed massa mollis, lacinia consectetur ipsum ullamcorper. Donec mattis egestas lorem, id iaculis diam bibendum et. Quisque ac nibh est. Proin sem ex, facilisis eget posuere ut, scelerisque ac neque. </p><!-- #someOtherText.subSection --></div><!-- .secondSection --></div><div class="thirdSection"><div id="advertisement" class="subSection"><h2>Advertisement</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><!-- #advertisement.subSection --></div><!-- .thirdSection --></div><!-- #extras --></div><!-- .columnWrapper --></div><div id="footer"><hr> © disclaimer here <!-- #footer --></div><!-- .widthWrapper --></div></body></html> Code (markup): screen.css /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } body { min-width:48em; /* for pre media query browsers */ padding:1em; font:normal 85%/150% arial,helvetica,sans-serif; text-align:center; background:#DEF; } .widthWrapper { max-width:64em; margin:0 auto; color:#FFF; background:#248; -webkit-border-radius:1em; border-radius:1em; -webkit-box-shadow:0 0 0.5em 0.25em rgba(0,0,0,0.25); box-shadow:0 0 0.5em 0.25em rgba(0,0,0,0.25); } * html .widthWrapper { /* legacy IE can't do min/max width so give them crappy fixed width, OH WELL */ width:48em; } #top { overflow:hidden; /* wrap floats and margins */ zoom:1; /* trip haslayout, wrap floats and margins legacy IE */ } h1 { float:left; text-align:left; font:bold 200%/120% arial,helvetica,sans-serif; } h1 a { display:block; padding:0.5em; text-decoration:none; color:#FFF; } h1 small { display:block; font:bold 50%/120% arial,helvetica,sans-serif; } h1 span { display:none; /* you could also use text-indent to hide the hyphen then use this element as your gilder-levin image replacement for a logo */ } h2 { padding-bottom:0.6em; font:bold 125%/120% arial,helvetica,sans-serif; } p { padding-bottom:1em; } #mainMenu { margin:0.75em 1em 0 0; list-style:none; float:right; text-align:right; max-width:32em; } * html #mainMenu { width:32em; } #mainMenu li { display:inline; } #mainMenu a { display:inline-block; width:10em; padding:0.25em 0; margin:0 0 0.25em 0.1em; text-align:center; text-decoration:none; text-transform:uppercase; color:#DEF; background:#024; -webkit-border-radius:0.75em; border-radius:0.75em; transition:background 0.3s, color 0.3s, text-shadow 0.3s; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { color:#FFF; background:#05A; text-shadow:0 0 4px #ACF; } .columnWrapper { overflow:hidden; /* wrap floats */ zoom:1; /* trip haslayout, wrap floats legacy IE */ color:#024; background:#FFF; } .columnWrapper a { color:#00F; transition:color 0.3s, text-shadow 0.3s; } .columnWrapper a:visited { color:#008; } .columnWrapper a:active, .columnWrapper a:focus, .columnWrapper a:hover { color:#44F; text-shadow:0 0 4px rgba(0,0,255,0.1); } .contentWrapper { width:100%; float:left; } #content { margin-right:16em; padding:1em; text-align:left; } #extras { position:relative; float:left; width:16em; margin-left:-16em; } #extras .subSection { padding:1em 0.5em; margin:0.5em; background:#F0F8FF; border:1px solid; border-color:#DEF #ACE #ACE #DEF; -webkit-border-radius:0.5em; border-radius:0.5em; } #extras ul { list-style:none; } #tagCloud li { display:inline; } #tagCloud a { display:inline-block; padding:0.25em; } #footer { padding:1em; } @media (min-width:75em) { .widthWrapper { max-width:86em; } #content { margin-right:32em; } #extras { float:none; width:32em; margin-left:-32em; } #extras .firstSection, #extras .secondSection { position:relative; float:left; width:16em; } #extras .firstSection { margin-right:-16em; right:100%; } #extras .secondSection { margin-left:-16em; } #extras .thirdSection { float:none; } } @media (min-width:100em) { .widthWrapper { max-width:102em; } #content { margin-right:48em; } #extras { float:none; width:48em; margin-left:-48em; } #extras .firstSection, #extras .secondSection, #extras .thirdSection { position:relative; float:left; width:16em; } #extras .firstSection { margin-right:-16em; right:100%; } #extras .secondSection { margin-left:-32em; } #extras .thirdSection { margin-left:-16em; } } @media (max-width:42.5em) { body { padding:0; min-width:192px; } .widthWrapper { -webkit-border-radius:0; border-radius:0; } h1, #mainMenu { float:none; max-width:99em; text-align:center; } #mainMenu { margin:0; padding:0.5em; background:#259; } } @media (max-width:33em) { .contentWrapper, #content, #extras { float:none; margin:0; width:auto; right:0; } #content { padding:1em 0.5em; } #extras .subSection { padding:1em 0.5em; margin:0; border-width:0 0 1px; -webkit-border-radius:0; border-radius:0; } /* we need to say #extras before these id's for specificity here otherwise we'd be resorting to !important, which if you have to use !important for anything other than user.css you are probably doing it wrong! */ #extras #recent, #extras #someOtherText { background:#F8FCFF; } } Code (markup): Sorry for the bad format, copy/paste doesn't work correctly with the WYSYWIG editor and my Firefox 44.0.2.
In order to have them under each-other you'd need one extra wrapping div. You strip the formatting off the two you want to be together, then apply it to the common container.... Basically what #extras does for all three, this new div would do for the latter two. It sucks adding the extra div, but when you want to change the layout that way, it's how you do it. So something like: <div id="extras"> <div class="section1"> /* first sidebar */ <!-- .section1 --></div> <div class="section2"> <div class="section2_1"> /* Second sidebar */ <!-- .section2_1 --></div> <div class="section2_1"> /* third sidebar */ <!-- .section2_2 --></div> <!-- .section2 --></div> <!-- #extras --></div> Code (markup): This can actually be easier as you can then just create both .section2_1 and .section2_2 as half the width and float:left; inside .section2.... then all you need to change is the width of .section2. Make the two inner-most sections width:16em and .section2 32 em, and boom they're next to each-other. drop .section2 to 16em, they're one over the other. There's actually a great number of ways of doing this, and a LOT of it hinges on how versatile you want the layout to be... for example most of my three column layouts are one on each side of the main, not both on the left.... if I went to three i'd want the versatility of being able to arrange them however I'd like... and that would mean making them siblings and using relative positioning to slide them around.