html column float thinkering

author: Kyle K <kylek389@gmail.com> 2014-03-10 23:09:49 -0500
committer: Kyle K <kylek389@gmail.com> 2014-03-10 23:09:49 -0500
commit: d410bd790c6af1676fda59be7e096782799475e0 (patch)
tree: a2c506b25f2f53f1e5a2c121a7cf35484424da09
parent: 8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac (diff)
download: websandbox-d410bd790c6af1676fda59be7e096782799475e0.tar.gz
websandbox-d410bd790c6af1676fda59be7e096782799475e0.tar.bz2
websandbox-d410bd790c6af1676fda59be7e096782799475e0.zip
3 files changed, 382 insertions, 0 deletions
diff --git a/html-column-float.html b/html-column-float.html
new file mode 100644
index 0000000..077c3d5
--- /dev/null
+++ b/html-column-float.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+  - floated elements get stacked horizontally next to each other depending on property 'left' or 'right'
+  - this example has 2 floating columns, clearfix is needed since either of these can be taller than
+    main content aka #main
+-->
+<head>
+  <title>Foobar</title>
+  <style type="text/css">
+    #main {
+      width: 960px;
+      margin: 0 auto;
+    }
+    #header {
+      border: solid 2px orange;
+      margin-bottom: 10px
+    }
+    #content {
+      background-color: #ddd;
+      border: solid 2px lime;
+    }
+    #content img {
+      float: left;
+      width: 300px;
+      height: 200px;
+      padding: 0 10px 10px 0;
+    }
+    #leftcolumn {
+      float: left;
+      width: 120px;
+      background-color: #aaa;
+      margin-right: 10px;
+      border: solid 2px orange;
+      /* height: inherit; parent doesn't have a fixed size, column will as tall as it needs to */
+    }
+    #rightcolumn {
+      background-color: #777;
+      margin-left: 10px;
+      float: right;
+      width: 120px;
+      border: solid 2px orange;
+    }
+    #footer {
+      border: solid 2px orange;
+      margin-top: 10px
+    }
+    /* this gets inserted after a div */
+    .clearfix:after {
+       content: " ";
+       visibility: hidden;
+       display: block;
+       height: 0;
+       clear: both;
+    }
+  </style>
+</head>
+<body>
+<div id="main">
+
+  <div id="header">
+    <h1>Welcome to Foobar</h1>
+  </div>
+
+  <div id="leftcolumn">
+    Navigation:<br />
+    <ul>
+      <li>Impreza</li>
+      <li>WRX</li>
+      <li>STi</li>
+    </ul>
+  </div>
+
+  <div id="rightcolumn">
+    Did you know?
+  </div>
+
+  <div id="content">
+    <img src="subbies/img1.jpg" alt="Impreza" />
+    <h2>Subaru Impreza</h2>
+    <p>The Subaru Impreza is a compact automobile, manufactured since 1992 by Subaru—the automobile division of Japanese transportation conglomerate,
+       Fuji Heavy Industries (FHI). Subaru introduced the Impreza as a replacement for the Leone, with the Leone's EA series engines replaced by the
+       newer EJ series versions. Now in its fourth generation, Subaru has offered four-door sedan and five-door hatchback body variants since 1992;
+       the firm also offered a coupe from 1995 for the first generation only. Mainstream versions have received naturally aspirated "boxer" flat-four
+       engines ranging from 1.5- to 2.5-liters, with the performance-oriented Impreza WRX and WRX STI models uprated with the addition of turbochargers.
+       Since the third generation series, some markets have adopted the abbreviated Subaru WRX name for these high-performance variants. The first three
+       generations of Impreza in North America were also available with an off-road appearance package titled Subaru Outback Sport. For the fourth generation,
+       this appearance package became known as the Subaru XV, and is sold internationally. Subaru has offered both front- and all-wheel drive versions of the
+       Impreza. Since the late-1990s, some markets have restricted sales to the all-wheel drive model—therefore granting the Impreza a unique selling proposition
+       in the global compact class characterized by front-wheel drive. However, Japanese models remain available in either configuration.
+    </p>
+    <img src="subbies/img4.jpg" alt="WRX" />
+    <h2>WRX</h2>
+    <p>Subaru debuted the turbocharged WRX performance variant of the third generation series alongside the mainstream naturally aspirated models on April 2, 2007.
+       For this generation, most markets adopted the abbreviated name "Subaru WRX", although the Japanese and North American markets retained the full "Subaru Impreza
+       WRX" title. The 2.5-liter EJ255 engine is largely unchanged internally. Changes in the engine compartment consist primarily of a fourth generation Legacy GT style
+       intake manifold and intercooler. The TD04 turbo remains from the previous generation, however it has been adjusted to fit the new intake design. Power output consists
+       of 169 kW (227 hp) and 320 N·m (236 lb·ft) from its 2.5-liter engine. It was offered in either a five-speed manual, or 4 speed automatic. The five-speed manual transmission
+       was changed to the same found in the fourth-generation Legacy GT. The rear limited slip differential has been discarded in exchange for the new VDC (Vehicle Dynamics Control)
+       system. The weight of the car also has been lightened and gives the WRX a 0 to 100 km/h (0 to 62 mph) time of 5.8 seconds. In contrast, curb weight of the standard Impreza
+       model is around 27.2 kg (60 lb) heavier. For the US market, the WRX was offered in "base", Premium, and Limited trim levels. In Australia, the WRX is available as a sedan
+       or hatchback. An optional premium package adds the satellite navigation with DVD player and 7-inch screen, leather upholstery and a sunroof.
+    </p>
+    <img src="subbies/img3.jpg" alt="STi" />
+    <h2>STi</h2>
+    <p>Debuting at the Tokyo Auto Show in October 2007, WRX STI versions build further on the standard WRX cars. The STI available in Japan is fitted with the 2.0-liter EJ207 engine
+      with twin scroll turbocharger generating 227 kW (308 PS) and 422 N·m (311 lb·ft) of torque. Export markets receive the higher-displacement 2.5-liter EJ257 unit with the
+      single-scroll VF48 turbocharger rated at 221 kW (300 PS) and 407 N·m (300 lb·ft) of torque. The turbocharger directs air through a larger top-mount intercooler which has
+      lost the red "STI" that was on previous generations. The STI (3,395 lbs) is heavier than the WRX (3,174- 3,240 lbs depending on trim) due to a more robust transmission,
+      rear differential and other chassis reinforcements. Like the standard WRX, the third generation model was shortened to "Subaru WRX STI", with the Japanese markets notably
+      abstaining from this convention. To differentiate the STI from the regular WRX, Subaru opted to manufacture the STI with a wider body and therefore track—as noted by the
+      flared wheel arches. Furthermore, Subaru utilized aluminum suspension components for the STI. Electronic modifications include a multi-mode electronic stability control with
+      "normal", "traction", and "off" modes; Subaru Intelligent-Drive (SI-Drive) with three modes: "intelligent", "sport", and "sport sharp"; and multi-mode driver controlled center
+      differential (DCCD). The DCCD enables driver to switch between manual and automated torque distribution ratio of the center differential. This distribution can vary from 35/65
+      to 50/50 front/rear.[12]
+    </p>
+  </div>
+
+  <div class="clearfix"></div>
+
+  <div id="footer">
+    No copyright.
+  </div>
+
+</div>
+</body>
+</html>
diff --git a/html-column-float_fix-with-height.html b/html-column-float_fix-with-height.html
new file mode 100644
index 0000000..65a0d8b
--- /dev/null
+++ b/html-column-float_fix-with-height.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+  - floated elements get stacked horizontally next to each other depending on property 'left' or 'right'
+  - this example has 2 floating columns, clearfix is needed since either of these can be taller than
+    main content aka #main
+-->
+<head>
+  <title>Foobar</title>
+  <style type="text/css">
+    #main {
+      width: 960px;
+      margin: 0 auto;
+      /* very hacky for dynamic content, ok for static */
+      height: 1360px;
+    }
+    #header {
+      border: solid 2px orange;
+      margin-bottom: 10px
+    }
+    #content {
+      background-color: #ddd;
+      border: solid 2px lime;
+    }
+    #content img {
+      float: left;
+      width: 300px;
+      height: 200px;
+      padding: 0 10px 10px 0;
+    }
+    #leftcolumn {
+      float: left;
+      width: 120px;
+      background-color: #aaa;
+      margin-right: 10px;
+      border: solid 2px orange;
+      height: inherit;
+    }
+    #rightcolumn {
+      background-color: #777;
+      margin-left: 10px;
+      float: right;
+      width: 120px;
+      border: solid 2px orange;
+      height: inherit;
+    }
+    #footer {
+      border: solid 2px orange;
+      margin-top: 10px
+    }
+    /* this gets inserted after a div */
+    .clearfix:after {
+       content: " ";
+       visibility: hidden;
+       display: block;
+       height: 0;
+       clear: both;
+    }
+  </style>
+</head>
+<body>
+<div id="main">
+
+  <div id="header">
+    <h1>Welcome to Foobar</h1>
+  </div>
+
+  <div id="leftcolumn">
+    Navigation:<br />
+    <ul>
+      <li>Impreza</li>
+      <li>WRX</li>
+      <li>STi</li>
+    </ul>
+  </div>
+
+  <div id="rightcolumn">
+    Did you know?
+  </div>
+
+  <div id="content">
+    <img src="subbies/img1.jpg" alt="Impreza" />
+    <h2>Subaru Impreza</h2>
+    <p>The Subaru Impreza is a compact automobile, manufactured since 1992 by Subaru—the automobile division of Japanese transportation conglomerate,
+       Fuji Heavy Industries (FHI). Subaru introduced the Impreza as a replacement for the Leone, with the Leone's EA series engines replaced by the
+       newer EJ series versions. Now in its fourth generation, Subaru has offered four-door sedan and five-door hatchback body variants since 1992;
+       the firm also offered a coupe from 1995 for the first generation only. Mainstream versions have received naturally aspirated "boxer" flat-four
+       engines ranging from 1.5- to 2.5-liters, with the performance-oriented Impreza WRX and WRX STI models uprated with the addition of turbochargers.
+       Since the third generation series, some markets have adopted the abbreviated Subaru WRX name for these high-performance variants. The first three
+       generations of Impreza in North America were also available with an off-road appearance package titled Subaru Outback Sport. For the fourth generation,
+       this appearance package became known as the Subaru XV, and is sold internationally. Subaru has offered both front- and all-wheel drive versions of the
+       Impreza. Since the late-1990s, some markets have restricted sales to the all-wheel drive model—therefore granting the Impreza a unique selling proposition
+       in the global compact class characterized by front-wheel drive. However, Japanese models remain available in either configuration.
+    </p>
+    <img src="subbies/img4.jpg" alt="WRX" />
+    <h2>WRX</h2>
+    <p>Subaru debuted the turbocharged WRX performance variant of the third generation series alongside the mainstream naturally aspirated models on April 2, 2007.
+       For this generation, most markets adopted the abbreviated name "Subaru WRX", although the Japanese and North American markets retained the full "Subaru Impreza
+       WRX" title. The 2.5-liter EJ255 engine is largely unchanged internally. Changes in the engine compartment consist primarily of a fourth generation Legacy GT style
+       intake manifold and intercooler. The TD04 turbo remains from the previous generation, however it has been adjusted to fit the new intake design. Power output consists
+       of 169 kW (227 hp) and 320 N·m (236 lb·ft) from its 2.5-liter engine. It was offered in either a five-speed manual, or 4 speed automatic. The five-speed manual transmission
+       was changed to the same found in the fourth-generation Legacy GT. The rear limited slip differential has been discarded in exchange for the new VDC (Vehicle Dynamics Control)
+       system. The weight of the car also has been lightened and gives the WRX a 0 to 100 km/h (0 to 62 mph) time of 5.8 seconds. In contrast, curb weight of the standard Impreza
+       model is around 27.2 kg (60 lb) heavier. For the US market, the WRX was offered in "base", Premium, and Limited trim levels. In Australia, the WRX is available as a sedan
+       or hatchback. An optional premium package adds the satellite navigation with DVD player and 7-inch screen, leather upholstery and a sunroof.
+    </p>
+    <img src="subbies/img3.jpg" alt="STi" />
+    <h2>STi</h2>
+    <p>Debuting at the Tokyo Auto Show in October 2007, WRX STI versions build further on the standard WRX cars. The STI available in Japan is fitted with the 2.0-liter EJ207 engine
+      with twin scroll turbocharger generating 227 kW (308 PS) and 422 N·m (311 lb·ft) of torque. Export markets receive the higher-displacement 2.5-liter EJ257 unit with the
+      single-scroll VF48 turbocharger rated at 221 kW (300 PS) and 407 N·m (300 lb·ft) of torque. The turbocharger directs air through a larger top-mount intercooler which has
+      lost the red "STI" that was on previous generations. The STI (3,395 lbs) is heavier than the WRX (3,174- 3,240 lbs depending on trim) due to a more robust transmission,
+      rear differential and other chassis reinforcements. Like the standard WRX, the third generation model was shortened to "Subaru WRX STI", with the Japanese markets notably
+      abstaining from this convention. To differentiate the STI from the regular WRX, Subaru opted to manufacture the STI with a wider body and therefore track—as noted by the
+      flared wheel arches. Furthermore, Subaru utilized aluminum suspension components for the STI. Electronic modifications include a multi-mode electronic stability control with
+      "normal", "traction", and "off" modes; Subaru Intelligent-Drive (SI-Drive) with three modes: "intelligent", "sport", and "sport sharp"; and multi-mode driver controlled center
+      differential (DCCD). The DCCD enables driver to switch between manual and automated torque distribution ratio of the center differential. This distribution can vary from 35/65
+      to 50/50 front/rear.[12]
+    </p>
+  </div>
+
+  <div class="clearfix"></div>
+
+  <div id="footer">
+    No copyright.
+  </div>
+
+</div>
+</body>
+</html>
diff --git a/html-column-float_fix-with-positioning.html b/html-column-float_fix-with-positioning.html
new file mode 100644
index 0000000..0457b3e
--- /dev/null
+++ b/html-column-float_fix-with-positioning.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+
+-->
+<head>
+  <title>Foobar</title>
+  <style type="text/css">
+    /*
+    body {
+      width: 960px;
+      margin: 0 auto;
+      position: relative;
+    }
+    */
+    #main {
+      position: relative;
+      /* new in this exmaple */
+    }
+    #header {
+      border: solid 2px orange;
+      margin-bottom: 10px;
+      top: 0;
+    }
+    #content {
+      background-color: #ddd;
+      border: solid 2px lime;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 80%;
+    }
+    #content img {
+      float: left;
+      width: 300px;
+      height: 200px;
+      padding: 0 10px 10px 0;
+    }
+    #leftcolumn {
+      width: 120px;
+      background-color: #aaa;
+      margin-right: 10px;
+      border: solid 2px orange;
+      height: inherit;
+      left: 0;
+    }
+    #rightcolumn {
+      background-color: #777;
+      margin-left: 10px;
+      width: 120px;
+      border: solid 2px orange;
+      right: 0;
+    }
+    #footer {
+      border: solid 2px orange;
+      margin-top: 10px;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+<div id="main">
+
+  <div id="header">
+    <h1>Welcome to Foobar</h1>
+  </div>
+
+  <div id="leftcolumn">
+    Navigation:<br />
+    <ul>
+      <li>Impreza</li>
+      <li>WRX</li>
+      <li>STi</li>
+    </ul>
+  </div>
+
+  <div id="rightcolumn">
+    Did you know?
+  </div>
+
+  <div id="content">
+    <img src="subbies/img1.jpg" alt="Impreza" />
+    <h2>Subaru Impreza</h2>
+    <p>The Subaru Impreza is a compact automobile, manufactured since 1992 by Subaru—the automobile division of Japanese transportation conglomerate,
+       Fuji Heavy Industries (FHI). Subaru introduced the Impreza as a replacement for the Leone, with the Leone's EA series engines replaced by the
+       newer EJ series versions. Now in its fourth generation, Subaru has offered four-door sedan and five-door hatchback body variants since 1992;
+       the firm also offered a coupe from 1995 for the first generation only. Mainstream versions have received naturally aspirated "boxer" flat-four
+       engines ranging from 1.5- to 2.5-liters, with the performance-oriented Impreza WRX and WRX STI models uprated with the addition of turbochargers.
+       Since the third generation series, some markets have adopted the abbreviated Subaru WRX name for these high-performance variants. The first three
+       generations of Impreza in North America were also available with an off-road appearance package titled Subaru Outback Sport. For the fourth generation,
+       this appearance package became known as the Subaru XV, and is sold internationally. Subaru has offered both front- and all-wheel drive versions of the
+       Impreza. Since the late-1990s, some markets have restricted sales to the all-wheel drive model—therefore granting the Impreza a unique selling proposition
+       in the global compact class characterized by front-wheel drive. However, Japanese models remain available in either configuration.
+    </p>
+    <img src="subbies/img4.jpg" alt="WRX" />
+    <h2>WRX</h2>
+    <p>Subaru debuted the turbocharged WRX performance variant of the third generation series alongside the mainstream naturally aspirated models on April 2, 2007.
+       For this generation, most markets adopted the abbreviated name "Subaru WRX", although the Japanese and North American markets retained the full "Subaru Impreza
+       WRX" title. The 2.5-liter EJ255 engine is largely unchanged internally. Changes in the engine compartment consist primarily of a fourth generation Legacy GT style
+       intake manifold and intercooler. The TD04 turbo remains from the previous generation, however it has been adjusted to fit the new intake design. Power output consists
+       of 169 kW (227 hp) and 320 N·m (236 lb·ft) from its 2.5-liter engine. It was offered in either a five-speed manual, or 4 speed automatic. The five-speed manual transmission
+       was changed to the same found in the fourth-generation Legacy GT. The rear limited slip differential has been discarded in exchange for the new VDC (Vehicle Dynamics Control)
+       system. The weight of the car also has been lightened and gives the WRX a 0 to 100 km/h (0 to 62 mph) time of 5.8 seconds. In contrast, curb weight of the standard Impreza
+       model is around 27.2 kg (60 lb) heavier. For the US market, the WRX was offered in "base", Premium, and Limited trim levels. In Australia, the WRX is available as a sedan
+       or hatchback. An optional premium package adds the satellite navigation with DVD player and 7-inch screen, leather upholstery and a sunroof.
+    </p>
+    <img src="subbies/img3.jpg" alt="STi" />
+    <h2>STi</h2>
+    <p>Debuting at the Tokyo Auto Show in October 2007, WRX STI versions build further on the standard WRX cars. The STI available in Japan is fitted with the 2.0-liter EJ207 engine
+      with twin scroll turbocharger generating 227 kW (308 PS) and 422 N·m (311 lb·ft) of torque. Export markets receive the higher-displacement 2.5-liter EJ257 unit with the
+      single-scroll VF48 turbocharger rated at 221 kW (300 PS) and 407 N·m (300 lb·ft) of torque. The turbocharger directs air through a larger top-mount intercooler which has
+      lost the red "STI" that was on previous generations. The STI (3,395 lbs) is heavier than the WRX (3,174- 3,240 lbs depending on trim) due to a more robust transmission,
+      rear differential and other chassis reinforcements. Like the standard WRX, the third generation model was shortened to "Subaru WRX STI", with the Japanese markets notably
+      abstaining from this convention. To differentiate the STI from the regular WRX, Subaru opted to manufacture the STI with a wider body and therefore track—as noted by the
+      flared wheel arches. Furthermore, Subaru utilized aluminum suspension components for the STI. Electronic modifications include a multi-mode electronic stability control with
+      "normal", "traction", and "off" modes; Subaru Intelligent-Drive (SI-Drive) with three modes: "intelligent", "sport", and "sport sharp"; and multi-mode driver controlled center
+      differential (DCCD). The DCCD enables driver to switch between manual and automated torque distribution ratio of the center differential. This distribution can vary from 35/65
+      to 50/50 front/rear.[12]
+    </p>
+  </div>
+
+  <div id="footer">
+    No copyright.
+  </div>
+
+</div>
+</body>
+</html>
author	Kyle K <kylek389@gmail.com>	2014-03-10 23:09:49 -0500
committer	Kyle K <kylek389@gmail.com>	2014-03-10 23:09:49 -0500
commit	d410bd790c6af1676fda59be7e096782799475e0 (patch)
tree	a2c506b25f2f53f1e5a2c121a7cf35484424da09
parent	8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac (diff)
download	websandbox-d410bd790c6af1676fda59be7e096782799475e0.tar.gz websandbox-d410bd790c6af1676fda59be7e096782799475e0.tar.bz2 websandbox-d410bd790c6af1676fda59be7e096782799475e0.zip