CodingForums.com - Image and Text side by side

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Image and Text side by side (http://www.codingforums.com/showthread.php?t=283869)

Image and Text side by side

I have an image and text side by side. I alighned the image to the left and thats fine. How do I get a bit of space between the image and text. The text is on the right side of the image but tight.

Code:

<p><strong><img src="awards2012photo's/Representatives of Adventure Playground at the Forks.png" width="329" height="270" align="left" alt="Parks Canada" /></strong></p>

      <p align="right"><strong>Parks Canada<br />

        Variety The Children’s Charity<br />

        Adventure Playground at the Forks</strong><br />

        Monica Giesbrecht<br />

        Hilderman Frank Thomas Cram Landscape Architects<br />

        Parks Canada.<br />

        Dick Penner J&amp;D Penner Ltd<br />

        Ken Crozier Crozier Enterprises</p>      

      <br>

i'm sure it's not a css thing. i did it along time ago. it has to do with the html.

CSS would be the easiest way. Assign the image a class name (like "leftImage") and then assign it a style of margin-right: 10px;

This CAN be done with pure html, by using tables, or by adding non-breaking character spaces ( ), but CSS is a much easier way to go.

If you only have the one image you want to be like this, you can do an inline style, <img src="" style="margin-right:10px"

Hello charisma44,
The html align attribute is depricated and should not be used.

Instead, float your image and the text wraps around it. You can then use margins to make space between them. Look at a simple float tutorial here.

Quote:

Originally Posted by charisma44 (Post 1298608)

i'm sure it's not a css thing. i did it along time ago. it has to do with the html.

Html is presentation. CSS is styling. The space you want is definitely a CSS thing.

The image has to stay left. and can't wrap text around. Text needs to stay to the right.

Quote:

Originally Posted by charisma44 (Post 1298624)

The image has to stay left. and can't wrap text around. Text needs to stay to the right.

Float is what you want. Did you look at the tutorial I suggested?

Sometimes, like when it's a caption or product description, it all needs wrapped in a containing element to keep things together. Look at this demo of how easy captions can be.

yes. and still trying to figure it out. i tryed the css the way the other guy said and it didn't make it worse and didn't make it better. still reading.

Ok we got it now. Thanks alot. :)

So, the snippet you posted... I'm not sure why you wrap an image in paragraph tags or why the strong tag too...

"The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer effect with CSS." See http://www.w3schools.com/tags/tag_phrase_elements.asp

Either way, it's nothing to do with the image.

Following my demo, look at it with floats instead, something like this -

Code:

<!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>Untitled Document</title>

<style type="text/css">

html, body {

        margin: 0;

        background: #fc6;

}

#container {

        width: 800px;

        margin: 30px auto;        

        padding: 200px 0 300px;

        background: #fff;

        box-shadow: 0 0 20px #8493A6;

        overflow: auto;

}

.wide_wrapper {

        width: 500px; /*adjust width to suit*/

        margin: 50px 0 0 150px;

        overflow: auto;

        text-align: left;

        border: 1px solid #F00;

        font-size: 0.7em;

}

.wide_wrapper img {        

        float: left; 

        margin: 5px; /*adjust space to suit*/

        background: #eee; 

}

</style>

</head>

<body>

    <div id="container">

        <div class="wide_wrapper">

            <img src="awards2012photo's/Representatives of Adventure Playground at the Forks.png" width="329" height="270" alt="Parks Canada" /> 

                <h3>Parks Canada</h3>

                    <p>  

                        Variety The Children’s Charity<br />

                        Adventure Playground at the Forks</strong><br />

                        Monica Giesbrecht<br />

                        Hilderman Frank Thomas Cram Landscape Architects<br />

                        Parks Canada.<br />

                        Dick Penner J&amp;D Penner Ltd<br />

                        Ken Crozier Crozier Enterprises</p>      

                    </p>

        <!--end wide_wrapper--></div>    

    <!--end container--></div>

</body>

</html>

I got the look I was going for. Tell me what you think

http://www.aacwinnipeg.mb.ca/awards2.html