Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Set an Element's Float

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268