Techno Blog

– prakash upadhyay

Clearfix: how to avoid that the background of an element disapear with floated content — October 19, 2012

Clearfix: how to avoid that the background of an element disapear with floated content

In this tutorial, I will explain how to avoid a problem that many beginners in css and Firefox users may
encounter.
For internet Explorer users, the ‘problem’ is not visible due to an interpretation error of the browser.
The problem arises when we want to use the css property float on an item contained in a containing block
(such as div) to which is applied a background or border.
The background/border of the container does not resize automatically in height to accommodate its ‘floated’
element and remains almost to say invisible while the ‘floated’ element is going to finish under its container.
Using a concrete example, I create a div ‘container’ into which I place 2 elements: one ‘floated’ to the left, the
other one ‘floated’ to the right.
The basic html structure:
<div class=”container”>
<div class=”floatleft”> </div>
<div class=”floatright”> </div>
</div>
The applied css rules:
.container{
border: 1px solid black;
width: 300px;
}
.floatleft {
width: 100px;
height: 200px;
float: left;
border: 1px solid red;
}
.floatright{
width: 100px;
height: 150px;
float:right;
border: 1px solid yellow;
}
NB: I imposted a fixed height to ‘floatleft’ e ‘floatright’ for this example. This property is not necessary, if you want
a variable height based on the content.
With IE, the background (or border for this example) adapts itself automatically in height to contain its
elements.
Preview done with Internet Explorer 7:


Instead, with more ‘modern’ browsers which interpret correctly the css (such as Firefox), the container’s
border does not have a height and do not includes the 2 ‘floated’ elements.
Preview done with Firefox 2:


In fact, following the w3c specifics, a ‘floated’ element is removed from the normal flux of the page. For that
reason, the div ‘container’ does not have anymore a specific height and its border (o background) is
reduced to null.
The solution offered by the w3c is to use the property clear:both; which specified that the top margin of a
‘cleared’ block is extended automatically to the point that it finds itself under the ‘floated’ elements.
This is the so-called clearfix and can be applied in 2 ways.
Adding an empty element with the property clear:both; underneath the 2 ‘floated’ elements, we
automatically give a thickness to the div container and doing so, make its border/background take the full
height to include it all.
The html structure with the extra div and its css style:
<div class=”container”>
<div class=”floatleft”> </div>
<div class=”floatright”> </div>
<div style=”clear:both;”> </div>
</div>
We then have the same result for Internet Explorer and Firefox, as the following example demonstrate.

The second solution, does not include the extra div but only the use of the pseudo-element :after.
This pseudo-element allows to generate content via the css to the end of a specific element.
For this reason, I will add a class name ‘clearfix’ to the div container to apply to it the css rules.
The html structure becomes:
<div class=”container clearfix”>
<div class=”floatleft”> </div>
<div class=”floatright”> </div>
</div>
And the css rules for the new class:
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix:after with pseudo-element :after, we add an extra content at the end of the div container
content: “.”; the content: a single point is enough
display: block; the generated content is converted into a block element as the css property clear can not be applied to an inline element
height: 0; its height is imposted to null to avoid visible space
clear: both; as explained before we apply the clear:both; to the generated content
visibility: hidden; the element is hidden
We then obtain the same result as before with Internet Explorer and Firefox.

Advertisements
Css property float: The characteristics of a floated element — October 10, 2012

Css property float: The characteristics of a floated element

1. The element is removed from the natural flux of the page and moved, as much as possible, to the left using float:left; or the right using float:right

2. The floated element will move until it is touching the border of its parent element (container) or the border of an another floated element.

3. If the floated element does not have enough horizontal space to fit itself, it will towards the bottom until it finds the necessary space.

4. A floated element becomes in all cases a block element and requests a specific width.
NB: a specific width is not needed if the floated element is applied directly to an image (html element ) as
the ‘img’ have an implicit width b y default.

5. The content around a floated element will move to fill up all the available space.
NB: The b orders and b ackground remain anyway the same size Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

6. The elements positioned before the floated element will not be disturbed
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortisnislut aliquip ex ea commodo consequat.

What is the difference between display: inline and display: block — October 9, 2012

What is the difference between display: inline and display: block

HTML elements can be displayed either in block or inline style.
The difference between these is one of the most basic things you need to know in order to use CSS effectively.
The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:
Block : Takes up the full width available, with a new line before and after (display:block;)
Inline : Takes up only as much width as it needs, and does not force new lines (display:inline;)
Not displayed: Some tags, like <meta /> and <style> are not visible (display:none;)
Block example

<p> tags and <div> tags are naturally displayed block-style.
(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)
A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Inline example

Inline-display elements don’t break the flow. They just fit in with the flow of the document.
So here I’ve got a paragraph going on, and I’m going to add a <span> tag that has a yellow background and italic text. See how it just fits right
in with the flow of the text?
More elements are naturally inline-style, including:
<span>
Your all-purpose inline element
<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)
<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
<img />
Image
<br>
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level
element.
<input>
Form input fields like
Text fields and
Buttons
<abbr>
Indicates an abbr. (hover to see how it works)
<acronym>
Working much like the abbreviation, but used for things like this TLA.

Difference Between Class & Div in CSS — October 5, 2012

Difference Between Class & Div in CSS

ID’s and What They’re Used For
ID, short for fragment identifier, is a beautiful attribute, but it’s very easy to use them improperly. You can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says “you are here” on a mall directory, and there can only ever be one of those.

 

 
Classes
Classes, like ID’s, can also be used to in JavaScript scripts, but unlike ID’s, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don’t know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element: