Image floating right, left : img float « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img float

Image floating right, left

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>float</title>
<style type='text/css'>
p.block {
    float: left;
    margin: 5px;
    background: lightyellow;
    border: 1px solid khaki;
    width: 150px;
    height: 150px;
    padding: 5px;
}
span#inline {
    float: left;
    background: khaki;
    border: 1px solid gold;
    padding: 5px;
    margin: 5px;
}
img {
    border: 1px solid rgb(244, 244, 244);
    margin: 5px;
}
img#left {
    float: left;
}
img#right {
    float: right;
}
</style>


    </head>
    <body>
        <img src='http://java2s.com/style/logo.png' alt='logo' id='left' />
        <img src='http://java2s.com/style/logo.png' alt='logo' id='right' />
        <p class='block'>
            When a block level element is floated, its sizing changes
            from expand-to-fit, to shrink-to-fit, and is no longer
            subject to margin collapsing.
        </p>
        <p>
            When an inline element is floated, it becomes a
            <span id='inline'>
                block-level element with shrink-to-fit sizing.
            </span>
        </p>
    </body>
</html>








Related examples in the same category

1.Image float: left
2.Image float left, (text wrap)
3.Image floating left and right
4.Image floating right
5.Image floating with text
6.Image floating left
7.Image floating right 2
8.Floating the image allows the text to flow around it
9.Text floating around image
10.Two image float left and right separately
11.Image floating to left
12.Image Floating right 3
13. floating to right with image
14.Image float and text wraping