The correct way to lay out the content right of the img?

Get Started
1

if the page structure is like the above. using HTML and CSS to get that. which way you will use?

some one told me:if you using float to both content (img,content), you must be fixed the width, the structure will lost its flexible, at the same time,you must solve problems caused by float. but i don’t know the best way to get that,

2

You don’t need to ‘fix’ the width, you just need to specify a width. The width can just as easily be in % for a fluid width page or em for an elastic width page as it can be in px for containing a fixed width image.

3

To make the image sit to the left of the content, you just float the image left. You don’t need to touch the text itself. (It will just flow around the image*.) And since the image already has its own width, you don’t need to set it explicitly at all.

  • Or you could put the content in a div of its own and give it a left margin to keep it clear of the floated image. Then the content will still have a flexible width but not wrap under the image.
4

It depends on what you are floating. If you float just the image then you don’t need to specify a width since the floated image will take up only the space required to display the image and the <p> will be wrapped around the image. If you float the <p>, then you’ll need to give the <p> a width.

This example floats just the image without specifying a width. You can then add margins or padding to suit.


<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #img1 {
                float: right;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <img id="img1" src="pic1.jpg" alt="" />
            <p>
                Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
                volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
                ante sed, ac turpis dis dui vestibulum aut
            </p>
        </div>
    </body>
</html>
5

You must use “float: left” on image style

<img src='images.png'  style='float: left;' > .................your content ..............