Positioning, Margin, CSS

Question

I have two images that are enclosed by <div> but would like to create a selector id="image". But I would like to position the first image that takes out of the flow of the page where its left margin flush with the left margin of the parent element. On the second image, I would like its positioning right margin flush with the left margin of the parent element. Any suggestions?

Before:
 _
| |
|_| 

 _
| |
|_| 

Hello world



After:

 _                   _
| |   Hello world   | |
|_|                 |_|

I'm thinking that my CSS should look like:

#image-left img {
position: absolute;
margin-left: 0;
}
#image-right img {
position: absolute;
margin-right: 0;
}

My HTML is:

<div id="image-left"><img src="image/logo.jpg"></div>
<div id="image-right"><img src="image/logo.jpg"></div>

Answer 1

You will have to set the parent position property too:

#parent {
    position:relative;
}

and set the left and right property

#image-left img {
    position: absolute;
    left: 0;
}
#image-right img {
    position: absolute;
    right: 0;
}

Note that whatever text you have in the middle will have to have some margin on left and right so it doesn't overlap with your floating images

Answer 2

Here's a method using CSS float to position the images to the left and right of their parent container with some text between them:

<div id="container">
    <div id="image-left">
        <img src="image/logo.jpg" />
    </div>
    Hello World
    <div id="image-right">
        <img src="image/logo.jpg" />
    </div>
</div>

div#container {
    width:50%;
    border:1px solid #000;
    text-align:center;
}

#image-left {
    float:left;
}
#image-right {
    float:right;
}

http://jsfiddle.net/JJEng/

EDIT:

To simplify:

<div id="container">
    <img id="image-left" src="image/logo.jpg" />
    Hello World
    <img id="image-right" src="image/logo.jpg" />
</div>

div#container {
    width:50%;
    border:1px solid #000;
    text-align:center;
}

img#image-left {
    float:left;
}
img#image-right {
    float:right;
}

http://jsfiddle.net/JJEng/1/

Answer 3

<div class="container">
    <div class="image-left"><img src="image/logo.jpg"></div>
    <div class="TextContent">Hello world</div>
    <div class="image-right"><img src="image/logo.jpg"></div>
</div>

.container div {
    float:left;
}

.container div img {
    display:box;
}

.container div.TextContent {
    margin-right:10px;
    margin-left:10px;
}

http://jsfiddle.net/u3JMz/