| /** | |
| * No-float menu bar | |
| */ | |
| html, body { | |
| background: lightyellow; | |
| margin: 0; | |
| min-height:100%; | |
| } |
| /** | |
| * A wrap-around ribbon | |
| */ | |
| * { box-sizing: border-box; } | |
| html { | |
| background: #eee; | |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiY2JjYmMiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+), url(https://dl.dropbox.com/u/36859227/images/noise_pattern_with_crosslines.png); | |
| background-repeat: no-repeat, repeat; |
| /** | |
| * Block Behavior - Margins | |
| */ | |
| body { | |
| margin: 0 auto; | |
| width: 80%; | |
| background-color: #222; | |
| } | |
| .container { |
| /** Responsive menu | |
| * Collapsed main menu for narrow screens. | |
| */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| article, | |
| footer, | |
| header, | |
| main, |
| /** | |
| * A serrated circle | |
| */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 100%; | |
| overflow-y: scroll; | |
| } |
| /** | |
| * A responsive image slide show | |
| * This is just the basic structure (test) | |
| */ | |
| * { box-sizing: border-box; } | |
| /* Picture gallery - all pictures visible for this demo */ | |
| .slides { | |
| position: absolute; |
| /** | |
| * Full-width vertically centered menu bar | |
| * Addendum to solutions from Roger Johansson | |
| * http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/ | |
| */ | |
| body { | |
| margin: 3em 0 0; | |
| background-color: #f0f0f0; | |
| color: #000; | |
| } |
| /** | |
| * Fit caption to the width of any image | |
| */ | |
| .captioned-figure { | |
| display: table; | |
| table-layout: fixed; | |
| } | |
| .captioned-figure img { | |
| margin-bottom: 10px; | |
| border: 0; |
Percentage based layouts can drop the last column when using floats or inline-blocks. Flexbox is a better solution. This is my attempt to combine old and new methods for a more robust solution. Not perfect, though!
A Pen by David Hucklesby on CodePen.
A Pen by David Hucklesby on CodePen.