diff options
| -rw-r--r-- | html-column-float.html | 126 | ||||
| -rw-r--r-- | html-column-float_fix-with-height.html | 129 | ||||
| -rw-r--r-- | html-column-float_fix-with-positioning.html | 127 |
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> |