summaryrefslogtreecommitdiffstats
path: root/html-column-float_fix-with-height.html
blob: 65a0d8bad26996c707ae0c9933bba1abdfedb96b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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>