What is the difference between HTML DIV and SPAN tag?

 <div> is a block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements.
 <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has meaning  when it is used with CSS.

Ex:

<div style=”color:red”>
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<div style=”color:green”>
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>

Learn HTML iFrame

To include output of another page into the current page.

Attributes:
scrolling=”yes/no”
marginwidth & marginheight
frameborder=”0″: To Remove the border from IFrame
Example:
<iframe src=”/html/menu.htm” width=”555″ height=”200″ marginheight=”30″ marginwidth=”30″
scrolling=”no”>
Sorry your browser does not support inline frames.
</iframe>
Using Iframe as the Target:
<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”http://www.microsoft.com” target=”iframe_a”>Microsoft </a></p>

CSS2 Display Positioning

Visibility and Display

CSS Visibility:
visibility: visible | hidden
Note: visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

CSS Display
Display: none | inline | block
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.
Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements

  • An inline element only takes up as much width as necessary, and does not force line breaks.
    Examples of inline elements: and

Example:
Display a list of links as a horizontal menu:

 

CSS 2.1 Display and Positioning


A display property with a value of “block” results in
a line break between the two elements.
CSS Scrollbars:
There may be a case when an element’s content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.
CSS provides a property called overflow which tells the browser what to do if the box’s contents is larger than the box itself. This property can take one of the following values:

Value
Description
visible
Allows the content to overflow the borders of its containing element.
hidden
The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
scroll
The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto
The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.
Example:
Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

CSS Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big.
Following are the Positioning Methods:
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning

Eg:

CSS 2.1 Display and Positioning
This is a div used for positioning example.

Static Positioning
 HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
 Static positioned elements are not affected by the top, bottom, left, and right properties

Fixed Positioning
 An element with fixed position is positioned relative to the browser window.
 It will not move even if the window is scrolled

Relative Positioning
 A relative positioned element is positioned relative to its normal position
 The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Absolute Positioning
 An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is  Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.  Absolutely positioned elements can overlap other elements

CSS Layers with Z-Index
 CSS operates in three dimensions – height, width and depth.
 To specify which element should be placed on top and which should be sent behind other element
 An element with greater Z-index is always in front of an element with a lower stack order.

Example:

<div style=”background-color: red; width: 300px; height: 100px; top: 10px; left: 80px; position: relative”></div>

<div style=”background-color: yellow; width: 300px; height: 100px; top: -60px; left: 35px; position: relative;”></div>

<div style=”background-color: green; width: 300px; height: 100px; top: -220px; left: 120px; position: relative”></div>

 CSS Floats

An element can be floated to the right or to left by using the property float. 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)

<div style=”float:left;width:100px”>

<img src=”bill.jpg” alt=”Bill Gates”>

</div>

<p>

Lerem prorem text causas naturales et antecedentes, idciro etiam nostrarum voluntatum…

</p>

Clear property (to turn off floating)

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

clear: both | left | right

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.thumbnail {

float: left;

width: 110px;

height: 90px;

margin: 5px;

}

.text_line {

clear: both;

margin-bottom: 2px;

}

</style>

</head>

<body>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<h3 class=”text_line”>Second row</h3>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

</body>

</html>