Set an Element's Float
By Stephen Bucaro
In traditional html, if a designer placed an image and some text on a webpage, it
appeared as shown below.
Every bill which shall have passed the House of Representatives and the Senate, shall,
before it becomes a law be presented to the President of the United States; if he approves,
he shall sign it, but if not he shall return it, with his objections to that House in which
it shall have originated, who shall enter the objections at larger on their journal, and
proceed to reconsider it.
Note the undesired white space next to the image. To solve this problem, the designer
would add the align attribute to the image tag. The example below shows use of the
align attribute with the value left.
<img align="left" src="images/house.gif">
Every bill which shall have passed the House of Representatives and the Senate, shall,
before it becomes a law be presented to the President of the United States; if he approves,
he shall sign it, but if not he shall return it, with his objections to that House in which
it shall have originated, who shall enter the objections at larger on their journal, and
proceed to reconsider it.
Note how the text now wraps around the image. But what if the designer wanted the
text wrapping to stop at some point? Then the designer would use a line break tag with
the clear attribute, as shown below.
<img align="left" src="house.gif">
Every bill which shall have passed the House of
Representatives and the Senate, shall, before it
becomes a law be presented to the President of the
United States; if he approves, he shall sign it,
<br clear="left" />
but if not he shall return it, with his objections
to that House in which it shall have originated,
who shall enter the objections at larger on their
journal, and proceed to reconsider it.
Every bill which shall have passed the House of Representatives and the Senate, shall,
before it becomes a law be presented to the President of the United States; if he approves,
he shall sign it,
but if not he shall return it, with his objections to that House in which
it shall have originated, who shall enter the objections at larger on their journal, and
proceed to reconsider it.
Today, most designers would use the CSS float property to cause text to flow
around an image.
<img style="float:left;" src="house.gif">
Shown below is an example with two images, one with its float property set to
left, and the other with its float property set to right.
<img style="float: left;" src="house.gif">
<img style="float: right;" src="house.gif">
<p>Every bill which shall have passed the House of
Representatives and the Senate, shall, before it
becomes a law be presented to the President of the
United States; if he approves, he shall sign it, but
if not he shall return it, with his objections to
that House in which it shall have originated, who
shall enter the objections at larger on their journal,
and proceed to reconsider it.</p>
Every bill which shall have passed the House of Representatives and the Senate, shall,
before it becomes a law be presented to the President of the United States; if he approves,
he shall sign it, but if not he shall return it, with his objections to that House in which
it shall have originated, who shall enter the objections at larger on their journal, and
proceed to reconsider it.
• This layout can also be achieved by setting one image's align
attribute to right, and the other image's align attribute to left.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
