Graphics Programs Reference
In-Depth Information
Given this markup, the paragraph will not clear. h at's because it no longer shares a parent
element with the columns, and so it isn't a sibling element. h at prevents the sibling selector
from working at all. With this markup pattern, you'll want to use one of the previous l oat
containment tips, like
overflow: auto
.
TWO SIMPLE COLUMNS
Putting two columns of text side by side is very simple: Just l oat them. If you need to clear
anything below them, see the previous tips, or just clear any following element.
Consider this markup:
<
div
class="column
one">...<
/
div>
<
div
class="column
two">...<
/
div>
<
div
class="footer">...<
/
div>
All you need is to set the columns next to each other, so your only real decision is which one
gets which side. Does column one go on the let or the right? Just to make it interesting,
assume you want it on the right. No problem:
.column
{
float
:
right
;
width
:
50%
;}
h at's enough to put the two columns side by side. h ey'll be jammed up against each other
and look terrible, but they're side by side!
120
With a little more CSS work, we can make them look passable (see also Figure 4-13):
.column
{
float
:
right
;
width
:
30%
;
margin
:
0
10%
;}
Of course, the footer is not exactly what we want—its top border is now across the top of the
two columns. Simple: Just clear it!
.footer
{
clear
:
both
;}
And that's a simple two-column layout. It contains two bits of beauty. First is that you can put
the columns wherever you want regardless of their source order. As we saw, the i rst column
can go on the right instead of the let . Second is that if you change your mind, swapping them
is as simple as changing
float: right;
to
float: left;
. Easy-peasy!
And of course you can do this with any kind of width measure—pixels, ems, percentages, you
name it. It all depends on whether you want the columns' widths to be “liquid”—that is, l ex
with changes in the browser window's width—or “i xed,” which sets an immovable value,
usually in pixels. Discussing which is better or worse could be an entire chapter all by itself, so
we'll leave it at “pick the one that i ts the design” and move on.
Search WWH ::
Custom Search