How Would I Position Images Here???

I'd like some help.

I'm wondering how I'd position images in the following black areas in the image:

http://img688.imageshack.us/img688/3519/picturelinks.jpg

My site is: www.caffevinci.com

I'd appreciate some help!

I'd just set it up as a 3 column layout and put the images in the left and right columns and the main content in the centre column.

Something like:


<div id="container">
<div id="left-col">Left Col images go here</div>
<div id="content">Content Goes Here</div>
<div id="right-col">Right col images go here</div>
</div>


CSS:


#container{
overflow:auto;
width:900px;
marign:0 auto;
}
#left-col, #content, #right-col{
float:left;
}
#left-col{
width:200px;
}
#content{
width:500px;
background:#fff;
}
#right-col{
width:200px;
}


Float them left to each other, make the container the size of the 3 columns put together (obviously change the widths to suit).

Thanks for the post. You're right.

I'm curious though, if I did want an image to overlap the main content and the background...how would I do it?

I'm curious though, if I did want an image to overlap the main content and the background...how would I do it? There comes the absolute position in handy.

There comes the absolute position in handy.

ap divs?

You may set absolute position on the image itself, if it's a part of document. If it's just for styling, you may set it as a background image of a div and then position that div.

Or you can use a negative margin on the image to push it upwards over some content.

<div id="content">
<p>Some Content<p>
</div>
<img src="img.jpg" class="image />

CSS:


.image{ margin-top -50px; /*Pushes the image up 50px*/ }


You may need to adjust the z-index if the image isnt' appearing over the content:


.image{ margin-top -50px; position:relative; z-index:100; }


Or positioning would work aswell, you set position relative on the container around the content and image, and then set postion absolute on the image, and specify it's positions (top,left,right,bottom)