CSS properties - float

revision:

float property

- specifies whether an element should float to the left, right, or not at all.

Absolutely positioned elements ignore the float property!

Elements next to a floating element will flow around it. To avoid this, use the "clear property" or the "clearfix" hack.

CSS syntax : float: none | left | right |initial | inherit;

Property values:

none : the element does not float, (will be displayed just where it occurs in the text). This is default

left : the element floats to the left of its container

right : the element floats to the right of its container

initial : sets this property to its default value

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.cssFloat="left"

example: float right

smiley Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

code: 
                    <div>
                        <p><img src="../pics/smiley.png" alt="smiley" style="width:10vw;height:10vw;margin-left:1.5vw;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, ..
                            . Mauris quis diam velit.
                        </p>
                    </div>
                    <style>
                        img {float: right;}
                    </style>

example: float left

smiley Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

code: 
                <div>
                    <p><img id="two" src="../pics/smiley.png" alt="smiley" style="width:10vw;height:10vw;margin-left:1.5vw;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, ..
                        . Mauris quis diam velit.
                    </p>
                </div>
                <style>
                    #two {float: left;}
                </style>

example: navigation bar - float left
code: 
                <div>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#news">News</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="#about">About</a></li>
                    </ul>
                </div>
                <style>
                    ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}
                    li {float: left;}
                    li a {display: inline-block; color: white; text-align: center; padding: 1.4vw 1.6vw; text-decoration: none;}
                    li a:hover {background-color: #111;}
                </style>