{"id":216,"date":"2012-08-30T03:00:47","date_gmt":"2012-08-30T03:00:47","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=216"},"modified":"2018-01-22T15:05:19","modified_gmt":"2018-01-22T15:05:19","slug":"04-beyond-floats","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/04-beyond-floats\/","title":{"rendered":"04 Beyond Floats"},"content":{"rendered":"<p>Sitepoint released a spot on article, <a href=\"http:\/\/blogs.sitepoint.com\/give-floats-the-flick-in-css-layouts\/\">Give Floats the Flick in CSS Layouts<\/a> that goes over alternate strategies to lay out a page, mostly relying on the display property to change the display of an element from a list item to an inline-block, for example.\n<\/p>\n<p>Possible display modes are: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none and inherit.\n<\/p>\n<p>The markup for these examples look like this except as noted:<\/p>\n<pre>\r\n&lt;nav>\r\n\t&lt;ul>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 1&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 2&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 3&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 4&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 5&lt;\/a>\r\n\t&lt;\/ul> \r\n&lt;\/nav> \r\n<\/pre>\n<h2>Display Inline-Block<\/h2>\n<\/p>\n<p>Inline-block displays block level elements into inline level elements with block attributes like margins, padding, width, height, and vertical-align, attributes that inline elements do not have. It\u2019s incredibly useful in any situation where you want to align block elements horizontally in rows, as they can be aligned by the top, middle or bottom.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#list-block-1 > nav > ul > li {\r\ndisplay: inline-block; \r\n\/*inline | block | list-item | run-in | inline-block | none | inherit*\/\r\nvertical-align: top;\r\n\/*top | middle | bottom*\/\r\nwidth: 100px; \r\n}  \r\n#list-block-1 li a:link, \r\n#list-block-1 li a:visited {  \r\ndisplay: block;  \r\ncolor: hsla(230,100%,100%,1); \r\ntext-decoration: none; \r\ntext-align: center; \r\nbackground-color: #ff6a00; \r\nfont-weight: 900; \r\nmargin-left: 0 0 0 10px; \r\npadding: 10px 0; \r\nborder: 1px solid hsla(30,100%,30%,1);\r\n}\r\n#list-block-1 > nav > ul > li a:hover {\r\ncolor: #ddd;\r\nbackground-color: hsla(30,100%,30%,1);   \r\nmargin-left: 0 0 0 10px; \r\npadding: 10px 0; \r\n}<\/style><\/pre>\n<\/div>\n<div id=\"list-block-1\">\n<nav>\n<ul>\n<li><a href=\"#\">menu 1<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 2<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 3<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 4<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 5<\/a>\n\t\t<\/li>\n<\/ul>\n<\/nav>\n<nav>\n<ul>\n<li><a href=\"#\">menu 1<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 2<\/a>\n\t\t<\/li>\n<li><a style=\"height: 100px;\" href=\"#\">menu 3<\/a>\n\t\t<\/li>\n<li><a href=\"#\">menu 4<\/a>\n\t\t<\/li>\n<li><a style=\"height: 100px;\"href=\"#\">menu 5<\/a>\n\t\t<\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<p>Each line items can be more than just a menu item, which is what this property is often asked to do. The boxes can be aligned from the top, center or bottom, and can contain all kinds of objects to serve as a layout strategy. If your page were designed to contain a number of columns, this is one way to lay out that page. <\/p>\n<h2>Using Margins to Space Columns<\/h2>\n<\/p>\n<p>By using a large margin to move the main body copy to the right, and using absolute positioning to place the content of the first column, you have a two columns page layout.<\/p>\n<p>The markup for the 2 column layout looks like this:<\/p>\n<pre>\r\n&lt;article>  \r\n\t&lt;p>\u2026 main content here  \r\n&lt;\/article>  \r\n&lt;nav>  \r\n\t&lt;ul>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 1&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 2&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 3&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 4&lt;\/a>\r\n\t\t&lt;li>&lt;a href=\"#\">menu 5&lt;\/a>\r\n\t&lt;\/ul> \r\n&lt;nav>  \r\n<\/pre>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#two-column {  \r\n  padding: 1em;  \r\n  max-width:  700px;  \r\n  position: relative;  \r\n  min-height: 17em;  \r\n}  \r\n#two-column nav {  \r\n  position: absolute;  \r\n  width: 150px;  \r\n  top: 1em;  \r\n  background-color: #FF6A00; \r\n}  \r\n#two-column nav ul {  \r\n  list-style: none;\r\n}\r\n#two-column a {  \r\n  text-decoration: none;\r\n  color: white;\r\n  font-weight: 900;\r\n}\r\n#two-column article {  \r\n  margin-left: 180px;  \r\n  height: 200px;\r\n  background-color: #FF6A00;  \r\n} \r\n<\/style><\/pre>\n<\/div>\n<div id=\"two-column\">\n<article>\n    &#8230; main content here.<br \/>\n  <\/article>\n<nav>\n<ul>\n<li><a href=\"#\">menu 1<\/a>\n\t<\/li>\n<li><a href=\"#\">menu 2<\/a>\n\t<\/li>\n<li><a href=\"#\">menu 3<\/a>\n\t<\/li>\n<li><a href=\"#\">menu 4<\/a>\n\t<\/li>\n<li><a href=\"#\">menu 5<\/a>\n\t<\/li>\n<\/ul>\n<\/nav>\n<nav>\n<\/nav>\n<\/div>\n<h2>Display Tables <\/h2>\n<\/p>\n<p>Without using tables, of course. Apply the layout behavior of tables, rows and cells to any HTML element. For alignment into columns or rows, these display values are a quick and easy solution, harkening back when tables were the ubiquitous layout strategy, but unlike tables, this is legal.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#table_display nav > ul {  \r\n\tdisplay: table;  \r\n\tborder-spacing: 0.25em;  \r\n}  \r\n#table_display nav > ul > li {  \r\n  \tdisplay: table-cell;  \r\n\tbackground-color: #FF6A00;   \r\n\twidth: 100px; \r\n\tmargin-left: 10px; \r\n\tpadding: 10px 0; \r\n\ttext-align: center;\r\n} \r\n#table_display a:link, #table_display a:visited {  \r\n\tcolor: #fff; \r\n\tfont-weight: 900; \r\n\ttext-decoration: none; \r\n}\r\n#table_display a:hover {\r\n\tcolor: #000;   \r\n}\r\n\r\n<\/style><\/pre>\n<\/div>\n<div id=\"table_display\">\n<nav>\n<ul>\n<li><a href=\"#\">menu 1<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">menu 2<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">menu 3<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">menu 4<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">menu 5<\/a>\n\t\t<\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<p>This can be used to create multiple column layouts.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#table_column {  \r\n  display: table;  \r\n  border-collapse: collapse;  \r\n  width: 100%;  \r\n}  \r\n#table_column  li {  \r\n  display: table-cell;  \r\n  width: 33.3%;  \r\n  padding: 1em;  \r\n  border-left: 1px solid #FF6A00;  \r\n  border-right: 1px solid #FF6A00;\r\n  \r\n}  \r\n<\/style><\/pre>\n<\/div>\n<div id=\"table_column\">\n<ul>\n<li>\n<h3>Bubble bath<\/h3>\n<p>A wet foam\u2014such as that on a cappuccino\u2014and a trough of plastic beads are both made up of nearly spherical, close-packed objects, but do these two types of materials, which are neither fully liquid or solid like, have anything in common? Experiments presented in Physical Review Letters suggest similarities between foams and granular matter that may lead to a more unified theory for describing the two materials.\n\t  <\/p>\n<\/li>\n<li>\n<h3>In a tight spot, spin and charge separate<\/h3>\n<p>Strange things happen when there is a shortage of space. The Pauli exclusion principle is well known for its effect on fermions, but bosons (for instance, photons) also behave interestingly when pressed for space. For this reason, researchers are very interested in schemes that create this kind of environment, in search of new physics and new technologies.\n\t  <\/p>\n<\/li>\n<li>\n<h3>Reading a single spin in silicon<\/h3>\n<p>The holy grail of research in quantum computing is to simultaneously meet the DiVincenzo criteria\u2014five obstacles that must be overcome to transform a quantum system into a scalable quantum computer [1]. Overcoming the first two, namely to have well-characterized qubits and long decoherence times can be a simple matter: Nature provides a variety of long-lived quantum systems.\n\t  <\/p>\n<\/li>\n<\/ul>\n<\/div>\n<h2>Vertically Centering a Box<\/h2>\n<p>It is almost impossible to vertically center an object unless you turn it into a table cell and assign it a vertical alignment of center. It could just as well be top or bottom, of course:<\/p>\n<p>The markup for the centered example looks like this:<\/p>\n<pre>\r\n&lt;div id=\"centered\">\r\n\t&lt;div>\r\n&lt;div>\r\n\t<p>Vertically and horizontally centered\r\n&lt;\/div>\r\n\t&lt;\/div>\r\n&lt;\/div>\r\n<\/p><\/pre>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#centered {  \r\n  width: 100%;  \r\n  height:  600px;  \r\n  display: table;\r\n  background-color: #FF6A00;\r\n  padding: 100px;\r\n}  \r\n#centered > div {  \r\n  display: table-cell;  \r\n  vertical-align: middle;\r\n  background-color: #FF6Aff;\r\n\r\n}  \r\n#centered > div > div {  \r\n  width: 100px;  \r\n  margin: 0 auto;  \r\n  background-color: #fff;\r\n  text-align: center;\r\n  padding: 10px;\r\n} \r\n  \r\n<\/style><\/pre>\n<\/div>\n<div id=\"centered\">\n<div>\n<div>\n<p>Vertically and horizontally centered\n\t\t<\/p>\n<\/div><\/div>\n<\/div>\n<p style=\"margin-top: 10px;\">These page layout solutions do not rely on the ubiquitous float. The time will come when the W3 <a href=\"http:\/\/www.w3.org\/TR\/css3-grid-layout\/\">Grid Layout module<\/a> is adopted, and the landscape changes, but these techniques will not go away. Instead, use them where they fit, anywhere you need to layout out your document.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sitepoint released a spot on article, Give Floats the Flick in CSS Layouts that goes over alternate strategies to lay out a page, mostly relying on the display property to change the display of an element from a list item &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/04-beyond-floats\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/216"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":13,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":4032,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/216\/revisions\/4032"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}