#divOne {
background: #dddddd;
padding-bottom: 1.5em;
float: left;
width: 350px;
}
#divTwo {
background: #aaaaaa;
padding-bottom: 1.5em;
float: left;
width: 250px;
}
PAGE LAYOUTS WITH CSS
281
7
5. Switch the column order. You can switch the stack direction by amending the float
values, changing left to right. This can be useful for when you want information
to be displayed in a certain order onscreen, but in a different order in code. For
example, your main content might be on the right and a sidebar on the left
onscreen, but screen readers would go through the main content before the
sidebar.
Note that floats start stacking from the edge of their container, which in this case is
20 pixels in from the browser window edge. For more control over the overall
layout, columns can be placed in a wrapper, which will be discussed later in the
chapter.
Note how with CSS layouts, each div only stretches to fill its content. This is in
marked contrast to an equivalent table-based layout, where cells (and therefore
their backgrounds) stretch to the overall height of the table. Later, you??™ll find
out how to mimic full-height columns by using a background image (creating
what are known as faux columns).
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
282
#divOne {
background: #dddddd;
padding-bottom: 1.5em;
float: right;
width: 350px;
}
#divTwo {
background: #aaaaaa;
padding-bottom: 1.5em;
float: right;
width: 250px;
}
6.
Pages:
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379