Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Spacing and Areas : Page 2

Learn to use proper spacing and make good use of your Web pages.


advertisement
Float
{float: none/left/right}
The float property lets you place an element, such as an image, to the left or right of its containing block and allows other elements, like text, to flow around it.

The value none prevents other elements from flowing around an element. Left moves an element to the left margin and allows other elements to flow to the right of it. Right moves an element to the right margin and allows other elements to flow to the left of it. When the values left and right are used, the element will be treated as a block-level element no matter what. This property is best used with images and text.

Example:



img {float: left}

logo This is the Project Cool logo. If you are using a CSS-enabled browser (this does not work with Netscape 4.0), the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it.




img {float: right}

logo

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it.




img {float: none}

logo

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap