| Author |  Topic  | |
Bdgfoehoa
Tolerated
22 Posts |  Posted - 07/18/2011 : 04:36:48 AM 
| A float can remove elements from a normal document flow. For instance, float to the left and to the right. Do you have any idea how to use a float?
|
|
john143
Really Swell
134 Posts | Posted - 07/18/2011 : 06:27:37 AM
| | Floats are one of the most powerful constructs offered by CSS, but they are also the hardest to master. Floatutorial provides a clear introduction to the theory behind floats.... |  |
|
johnchristopher
Tolerated
3 Posts | Posted - 07/27/2011 : 02:16:39 AM
| The CSS float property is a very important property for layout. It allows you to position your Web page designs exactly as you want them to display - but in order to use it you have to understand how it works.
A CSS float property looks like this:
.right {float: right;}
What Floats?
You can't float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (<img/>), paragraphs (<p></p>), divisions (<div></div>), and lists (<ul></ul>). Other elements that affect text, but don't create a box on the page are called inline elements and can't be floated. These are elements like span (<span></span>), line breaks (<br/>), strong emphasis (<strong></strong>), or italics (<i></i>).
|
http://www.thecliffwebsolutions.com | |
|
magicdoll
Well Liked
51 Posts | Posted - 08/17/2011 : 12:26:43 PM
| | You can't float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (<img/>), paragraphs (<p></p>), divisions (<div></div>), and lists (<ul></ul>). Other elements that affect text, but don't create a box on the page are called inline elements and can't be floated. These are elements like span (<span></span>), line breaks (<br/>), strong emphasis (<strong></strong>), or italics (<i></i>). |
Create a free toolbar for your website & get paid! | |
|
Creely
Well Liked
55 Posts | Posted - 08/17/2011 : 11:41:37 PM
| Floating an image to the right
Float an image to the right of a block of text and apply a border to the image.
Step 1 - Start with a paragraph of text and an image
Step 2 - Apply float: right to the image
Step 3 - Add margin
Step 4 - Add a border
Step 5 - Add padding
All steps combined
Floating an image and caption
Float an image and caption to the right of a block of text and apply borders using Descendant Selectors.
Step 1 - Start with a paragraph of text and an image
Step 2 - Add a div around image and caption
Step 3 - Apply "float: right" and width to the div
Step 4 - Apply margin to the div
Step 5 - Add a background color
Step 6 - Add padding
Step 7 - Add a border to the div
Step 8 - Add a border to the image
Step 9 - Remove margin-top on the paragraph
Step 10 - Playing with borders
All steps combined
Floating a series of "clear: right" images
Float a series of images down the right side of the page, with content flowing beside them.
Step 1 - Start with a paragraph of text and a series of images
Step 2 - Apply float: right to the images
Step 3 - Add margin
Step 4 - Add "clear: right"
Step 5 - Remove margin-top on the paragraph
All steps combined
Floating an image thumbnail gallery
Float a series of thumbnail images and captions to achieve an image gallery.
Step 1 - Start with some thumbnails and captions
Step 2 - Float the divs
Step 3 - Add a border
Step 4 - Add margin
Step 5 - Forcing a new line
Step 6 - Add padding
All steps combined
Floating next and back buttons using lists
Float a simple list into rollover "back" and next "buttons".
Step 1 - Start with a paragraph of text and a list
Step 2 - Remove bullets
Step 3 - Remove padding and margins
Step 4 - Float the list items
Step 5 - Adding a line above the list
Step 6 - Adding padding below the line
Step 7 - Display block
Step 8 - Moving the width
Step 9 - Add a background color
Step 10 - Add padding
Step 11 - Text decoration and alignment
Step 12 - Add a hover state
All steps combined
Floating inline list items
Float a simple list, converting it into a horizontal navigation bar.
Step 1 - Start with a simple unordered list
Step 2 - Remove the bullets
Step 3 - Remove padding and margins
Step 4 - Display inline
Step 5 - float the "a" state
Step 6 - Add a background color
Step 7 - Add padding to the "a" state
Step 8 - Removing text decoration
Step 9 - Add a border to separate the list items
Step 10 - Add a rollover color
Step 11 - Float the UL
Step 12 - Add a background color to the UL
All steps combined
Floating a scaleable drop cap
Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs.
Step 1 - Start with a paragraph of text
Step 2 - Add a span around the first letter
Step 3 - Float the first letter
Step 4 - Increase the font size
Step 5 - Set a line-height
All steps combined
Liquid two column layout
Float a left nav to achieve a two column layout with header and footer.
Step 1 - Start with the semantically marked up code
Step 2 - Add width and margin to the container
Step 3 - Add color, background color and border
Step 4 - Add line height
Step 5 - Styling the top banner
Step 6 - Remove margins and padding from the h1
Step 7 - Apply "float" to the leftnav
Step 8 - Add margin and padding to the leftnav
Step 9 - Setting margins to the "content" div
Step 10 - Add padding to the "content" div
Step 11 - Styling the footer
Step 12 - Add color and background color to the footer
Step 13 - Add a border to the footer
Step 14 - Removing top margins
Step 15 - Setting a maximum line length
All steps combined
Liquid three column layout
Float left and right columns to achieve a three column layout with header and footer.
Step 1 - Start with the semantically marked up code
Step 2 - Add width and margin to the container
Step 3 - Add color, background color and border
Step 4 - Add line height
Step 5 - Styling the top banner
Step 6 - Remove margins and padding from the h1
Step 7 - Apply "float", margin and padding to the leftnav
Step 8 - Apply "float", margin and padding to the rightnav
Step 9 - Setting margins to the "content" div
Step 10 - Add padding to the "content" div
Step 11 - Styling the footer
Step 12 - Add color and background color to the footer
Step 13 - Adding border to the footer
Step 14 - Removing top margins
Step 15 - Setting a maximum line length
All steps combined
| |
|
magicdoll
Well Liked
51 Posts | Posted - 08/18/2011 : 11:17:25 AM
| | You can't float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (<img/>), paragraphs (<p></p>), divisions (<div></div>), and lists (<ul></ul>). Other elements that affect text, but don't create a box on the page are called inline elements and can't be floated. These are elements like span (<span></span>), line breaks (<br/>), strong emphasis (<strong></strong>), or italics (<i></i>). |
Create a free toolbar for your website & get paid! | |
|
donaldsmith
Tolerated
United Kingdom
24 Posts | Posted - 08/20/2011 : 01:14:33 AM
| Once you understand how the float property, you can start using it for layouts. These are the steps I take to create a smooth web site:
Designing the layout (on paper or a graphics tool or head).
Determine how the site will be divisions.
Determine the widths of the various containers and objects within it.
Float all. Even the outer container element is floated left, so I know where it will be on the port to the browser.
|
I love printing with Dow Printing. http://www.dowprinting.com | |
|
michealscofield
Tolerated
Australia
15 Posts | Posted - 08/30/2011 : 12:23:00 AM
| Thank you so much for your valuable information..
actually i was trying to figure out how to use float from a long time..
thnks |
Edited by - michealscofield on 08/30/2011 12:23:39 AM | |
|
danielcharles
Tolerated
30 Posts | Posted - 10/11/2011 : 06:25:56 AM
| | Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Floats and doubles have the same performance characteristics on modern CPUs, doubles are somewhat bigger and that's all. If in doubt, just use double. | |
|
cashloan
Really Swell
USA
119 Posts | Posted - 11/10/2011 : 11:56:47 PM
| The f after a number is used to say that it is float.
If you don't it will be used as different type but you could assign to a float variable by casting it.
(A number is also automatically converetd)
example of numeric types
25 //int
25l //long
25u //unsigned
25.0 //double
25.0f //float | |
|
Casey Affleck
Well Liked
United Kingdom
48 Posts | |
randy27
Well Liked
61 Posts | |
chiwawa
King of the Hill
767 Posts | Posted - 05/01/2012 : 02:21:30 AM
| quote:
Originally posted by johnchristopher
The CSS float property is a very important property for layout. It allows you to position your Web page designs exactly as you want them to display - but in order to use it you have to understand how it works.
A CSS float property looks like this:
.right {float: right;}
What Floats?
You can't float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (<img/>), paragraphs (<p></p>), divisions (<div></div>), and lists (<ul></ul>). Other elements that affect text, but don't create a box on the page are called inline elements and can't be floated. These are elements like span (<span></span>), line breaks (<br/>), strong emphasis (<strong></strong>), or italics (<i></i>).
Thanks for the share. |
Try Running BLAM Ads on your WebSite instead of AdSense
I'm making 200% extra money now since I made the switch over! Content locking ROC | |
|
golam_rabby22
Loved by Many
255 Posts | Posted - 11/04/2012 : 05:38:44 AM
| float used by css menu.
text,image or any file move one side to another side to need float.
it is also used to left,right,center or %.
img
{
float:right or 60%;
} |
Read BLAM Ads Reviews!
Join Today | |
|
dorothyshore
Tolerated
6 Posts | Posted - 11/05/2012 : 06:08:01 AM
| | Thats a great info you have shared | |
|
| | Topic | |
All Forums
how to use floats?
New Topic