Question

I have two divs on my page, and between the two div’s I have an image. Let me further explain…

Div 1 – This is the page’s container.
Div 2 – Holds a few lines of text
Image – Just an ordinary jpeg image I want to format.

Div 2 takes up 40% of my page starting from the page’s left border. It stretches very far down my page. So, this leaves around 60% of my page left to work with. I want for my image to be 200px wide, and 110px in height. For one reason or another, my image just appears on the bottom of my page in it’s original (pre-format) width and height. I will show you the code that I am using.

HTML:

<div id="container">

  <div id="div2">
    <p> Hi SO, I hope someone can help me with this issue! </p>
  </div>

  <img id="image1" src="test.jpg" alt="" />

</div>

CSS:

#image1{
    width:200px;
    height:100px;
    position:relative;
    float:right;
}

To recap, I want the image ‘image1’ to be aligned between the left edge of ‘div2’ and the page’s right border. So, I want it centered between the two but NOT centered on my page of course.

Answer 1

I don’t think you want to be working with percentages to achieve what you describe.

This is basically what you want:

http://jsfiddle.net/fdXHs/2/

You can check my styles to see how I did it, if you need a more thourough explanation I will post it.

Also you describe that nothing happens to the image, this indicates that no styles are being applied, check your css markup if theres anything that might cause not being used.

AFTER WEBSITE EDIT

The column that needs to hold both elements (the image and the 40% width div) isn’t wide enough to hold them both (combined width is 957px, container width is 845px). There isn’t enough room for the image so it gets bumped under the first div…

replace prductsummary with:

#productsummary {
    clear: both;
    background: red;
    margin: 0 220px 0 10px;
    padding: 10px 0 0 0;
)

And the image:

#lol {
    width: 200px;
    float: right;
    margin: 10px;
}