Using position, floating, and exclusions in overall layout

Position, floating and exclusions

You can use position and float to position elements in overall layout. Float is a mechanism by which the surrounding content will flow smoothly around the element with its float property specified to left or right.

Exclusions provide a way to overcome this limitation with float. Exclusions are achieved by specifying the CSS3 property wrap-flow. The wrap-flow property supports a variety of options.

The following Table outlines the Values available for the wrap-flow property:

Value	Description
auto	This is the default value. The exclusion item will be over top of the inline element.
both	The exclusion will force the inline element to wrap smoothly on both sides.
start	The exclusion will force the inline elements to wrap only on the starting edge, and the ending edge will be empty.
end	The exclusion will force the inline element to wrap only on the ending edge, and the starting edge will be empty.
maximum	The exclusion will force the inline element to wrap only on the side with the largest available space.
clear	The exclusion will force the inline content to wrap only on the top and bottom and leave the start and end edges empty.

* At this time, the wrap-flow property is only implemented in Internet Explorer 10+.

Setting the wrap-flow property to both

The inline text wraps nicely around both the start (left edge of the image) and the end (right edge of the image).

The text is quite close to the image. The wrap-margin property can be specified to provide a margin around the image.

The following code demonstrates the wrap-flow:both; and the wrap-margin properties:

<head>
<style type="text/css">
    #p2{
        width: 80%;
        padding-left: 10px;
       }   
    #img2 {
        position: absolute;
        height: 100px;
        width: 150px;      
        /* The exclusion will force the inline 
           element to wrap smoothly on both sides. */
        -ms-wrap-flow: both;
        /* MARGINS AROUND THE IMAGE*/
        -ms-wrap-margin: 15px;
        }
</style>
</head>
<body>
    <h2> -ms-wrap-flow: both; -ms-wrap-margin: 15px;</h2>
    <p id="p2">
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        <img src="flowers.jpg" id="img2" />
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        At invidunt splendide qui, ut pro choro iisque democritum. Partem 
    </p>
</body>

Setting the wrap-flow property to start or end

In the case where you want to have the inline content wrap only on the left or the right, you will specify the wrap-flow property to start or end respectively.

The following code demonstrates the wrap-flow properties to the value start or end:

<head>
<style type="text/css">
    #p1 {
            width: 80%;
            padding-left: 10px;
        }
    #img1 {
        position: absolute;
        height: 100px;
        width: 150px;
        /* End - the content on the right */
        /* Start - the content on the left */
        -ms-wrap-flow: start;    
        }
</style>
</head>
<body>
    <p id="p1">
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        <img src="flowers.jpg" id="img1" />
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        At invidunt splendide qui, ut pro choro iisque democritum. Partem 
    </p>
</body>

Setting the wrap-flow property to clear

In this case both sides of the exclusion object are cleared and the text wraps only along the top and the bottom.

The following code demonstrates the wrap-flow properties to the value clear:

<head>
<style type="text/css">
    #p1 {
            width: 80%;
            padding-left: 10px;
        }
    #img1 {
        position: absolute;
        height: 100px;
        width: 150px;
        /* The content wrap only along the
           top and bottom */
        -ms-wrap-flow: clear;    
        }
</style>
</head>
<body>
    <p id="p1">
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        <img src="flowers.jpg" id="img1" />
        Modus elaboraret temporibus no sit.Lorem ipsum dolor sit debitis. 
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        Lorem ipsum dolor sit debitis. Modus elaboraret temporibus no sit.
        At invidunt splendide qui, ut pro choro iisque democritum. Partem 
    </p>
</body>

Ads Right