Get 2 images to float on left & right side of the content?

HTML & CSS
1

I want 2 stock photos that I purchased to float on the left and right side of the content. I have a temporary photo from that movie Wallstreet just to show an example of what I am dealing with.

I have the following code to display it in the page, perhaps I am missing something:

CSS:

#right-photo {
float:right;
width:50%;
height:380px;
margin:0px 0px 0 610px;
background:url(images/rightside.jpg)
}

HTML:

<div id=“right-photo”></div>

Website:
Dental Health Campaign USA - Donate

2

Three things you need to know to star mastering floats:

Without adressing other issues in detail: (font , BRs, center tags, unnecessary divs… WORSE LI with no parent UL!?)

  1. floated elements MUST come FIRST in the SOURCE ORDER. So <div id=“right-photo”></div> ( and whatever you are floating left) should be sibling tag of what your content and they should come before in your HTML. The order or left/right does not matter.

  2. Floated elements only float when there enough space for them to do so. i noticed you have your right float width:50%; ( and a left-margin of 610px; but left margin have no effect on elements that are float:right; you might as well put margin:0;)–then the sum of the whatever you are floating left and your content MUST ADD UP to LESS THAN OR EQUAL the other 50% of the container or the layout will break

  3. You CAN put floats outside their container (assuming the container has overflow:visible; by using a NEGATIVE LEFT MARGIN on the element floated left; and a NEGATIVE RIGHT MARGIN on the element FLOAT RIGHT.

I hope that helps you.