CSS Floating Elements, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Floating Elements, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Floating Elements.


     Back             Next     



An element can be floated to the right or to left by using the property float in Cascading Style Sheet. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) 

How is it done?

The HTML code for the example above, look as follows:

<div id="picture">
	<img src="ggl.jpg" alt="CSS Tutorial, Global Guide Line">
</div>

<p>causas naturales et antecedentes, 
idciro etiam nostrarum voluntatum...</p>

To get the picture floating to the left and the text to surround it with Cascading Style Sheet, you only have to define the width of the box which surrounds the picture and thereafter set the property float to left:

#picture {
	float:left;
	width: 100px;
}

Another example: columns

Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML-code with <div> as follows

<div id="column1">
	<p>You are learning CSS Floating Elements
         at CSS Tutorial of Global Guide Line...</p>
</div>

<div id="column2">
	<p>This is second column of CSS Tutorial...</p>
</div>

<div id="column3">
	<p>This is third column of CSS Tutorial...</p>
</div>

Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by defining the property float:

#column1 {
	float:left;
	width: 33%;
}

#column2 {
	float:left;
	width: 33%;
}

#column3 {
	float:left;
	width: 33%;
}

float can be set as either left, right or none.

The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall behave.

By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates.

The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.


<div id="picture">
	<img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes, 
idciro etiam nostrarum voluntatum...</p>


To avoid the text from floating up next to the picture, we can add the following to our Cascading Style Sheet:

#picture {
	float:left;
	width: 100px;
}

.floatstop {
	clear:both;
}

     Back             Next     
 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 277 visitors are online now