HTML and CSS Reference
In-Depth Information
Column spans
You don't always want everything to fit neatly into columns. You may
sometimes want an individual element to span multiple columns. For
example, in newspapers it's common for photographs to span multiple
columns of text.
Inserting an element in the text
doesn't produce useful results:
<p>I never am really satisfied that
I understand anything; because,
understand it well as I may, <img
src="uf012314.gif">my comprehension
can
...</p>
The image is 720 pixels wide, and
the columns are 260 pixels wide.
The result is that the image sticks
out from its column and lies under-
neath the text of the next column.
One useful approach is to limit the
width of any images. When columns
are in use, a width of 100% applies
to the width of the column rather
than the width of the page:
img {
max-width: 100%;
}
But for pictures that are far wider
than they are high, the result may be
that the image is too small. We need
a way for an element to take up
100% of the page width and have
the text columns flow around it.
This is what
column-span
is for.
