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">
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
RSS Feed