My div has a height of 103px and a width of 300px.

I'd like my image to be on the right side of the div, and have my text centered in the remaining space.

I've currently got

my-div
{
     text-align:center;
}

<html>
<head>
<title>test</title>
</head>

<body>
    <div class="my-div">
        My div text is here <br/>
        My div text is here2 <br/>
        My div text is here3 <br/>
        <img width="80" height="103" alt="My alt text" src="image/myimage.jpg"/>
    </div>
</body>
</html>

This just centers the text in the div with the image below it. Any suggestions?

Thanks,

1 answer

2
points
This was chosen as the best answer

This works, pick it apart a bit and you'll see why.

http://www.boldfishclient.co.uk/doctype/float.html

<!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" lang="en">
    <head>
        <title></title>
            <style type="text/css" media="screen" charset="utf-8">
            .my-div{
                width: 300px;
                margin: 20px auto;
                border: 1px solid green;
                overflow: hidden;
            }

            .my-div p{
                text-align:center;
                float: left;
                width: 160px;
                margin: 5px;
            }

            .my-div img{
                float: right;
            }
            </style>    
    </head>
    <body>


        <html>
        <head>
        <title>test</title>
        </head>

        <body>
            <div class="my-div">
                <p>My div text is here, here,<br />
                My div text is here and <br />
                        here and here<br />
                My div text is here3 and here</p>
                <img width="122" height="108" alt="My alt text" src="http://www.boldfish.co.uk/images/logo.gif"/>
            </div>
        </body>
        </html>
    </body>
</html>
Answered about 7 years ago by Tony Crockford