Today, most designers lay out a webpage by placing content inside boxes, and then laying out the boxes on the webpage. When you apply the float property to a box it is no longer in the normal flow of the webpage. It will shift to the right or left until it touches the edge of another floated box, or the side of the browser window.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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">

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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