Building your first web-page. Floating elements.
The CSS float property is a very important property for layout. It allows positioning web page designs exactly as you want them to display, but in order to use it is important to understand how it works.
The float property was originally designed to allow content to wrap around images. Here is a simple example from the car rental section of the Porter website. An element <img> (Hertz) with a width of 150px is floated to the left side of a few paragraphs of text, with paragraphs wrapped around the image.
An element can be floated to the right or to left. Furthermore, the box with its contents could either float to the right or to the left in a document (or the containing box).
The principle of how floats work is illustrated on the image below:
Here is a vivid example of the illustration above:
How is it done?
HTML for the example above would look as follows:
<div id="picture">
<img src="...">
</div>
<p>...</p>
To make the picture float to the left and the text wrapped around it, we would need to define the width of the box, which surrounds the picture and then set the float in CSS:
#picture {
float: left;
width: 100px;
}
Floats are also 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>your text for column1 is here.</p>
</div>
<div id="column2">
<p>your text for column2 is here.</p>
</div>
<div id="column3">
<p>your text for column3 is here.</p>
</div>
In CSS: the desired width of the columns is set to 33% with float each column to the left:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
What can you float?
You can only float block-level elements (and can’t float inline-level elements).
What’s the difference?
Block-level elements occupy any available width, regardless of their content, and begin on a new line.
Inline-level elements occupy only the width their content requires and line up on the same line, one after the other.
Inline-level elements are generally used for smaller pieces of content, such as a few words selected to be bolded. Block-level elements are used for larger pieces of content, such as headings and structural elements (images (img), paragraphs (p), divisions (div), lists (ul).
How far will it float?
When an element is floated, it will float all the way to the edge of its parent element. If there isn’t a parent element, the floated element will then float all the way to the edge of the page.
To prevent floated elements from touching one another, causing the content of one to sit directly next to the content of the other, we can use the margin property to create space between elements.
The property clear.
Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the clear property. Clear property accepts a few different values, the most commonly used are: left, right, and both.
Let’s come back to the example with Bill Gates, where the text is automatically moved up beside the picture of Bill Gates.
To avoid the text from floating up next to the picture, we can add clear property to our HTML and CSS:
HTML:
<div id="picture">
<img src="…">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales...</p>
CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Conclusions:
You should always define a width on floated elements. If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float.
Be aware that the float property relies on an element having a display value of block, and may alter an element with a display value of inline. For example, <span> inline-level element would ignore any height or width property values.
Float property comes with a few pitfalls. The styles of elements around the floated element can be negatively impacted. Often margin and padding property values aren’t interpreted correctly. Another downside is that sometimes unwanted content begins to wrap around a floated element.
To prevent content from wrapping around floated elements it is important to understand how clear floats (using the clear property).
Appropriate links:
https://developer.mozilla.org/ru/docs/Web/CSS/float
http://webdesign.about.com/od/advancedcss/a/aa010107.htm
http://html.net/tutorials/css/lesson13.php
http://learn.shayhowe.com/html-css/positioning-content/