How do I move this iframe over?

Hi,
To start off I have just started to use CSS and have only been at a few week so I really do not know a lot yet.

[IMG]http://img208.exs.cx/img208/879/ieff7hl.jpg[/IMG]

As you can see if you looked at the image, I have 2 screen shoots of the same page one in Firefox and the other in IE 6.0.

I have highlight the area on the Firefox it is the blue area to the right of the box containing the phase “Adult instruction”

I have tried various way to move the iframe over but I have not been able to get moved over.

What I have there is a division that contains 2 iframes. Here is the CSS for the container and the 2 iframes.

[code] #iframe_con {
background-color: #FFFACD;
float:right;
width: 100%;
height: 145px;
}

#iframe_01{
padding-bottom: 5px;
padding-top: 5px;
float:left;
}

p.iframe01 {
font-family: Comic sans MS;
font-size: 20px;
color: black;
background: #FFFACD;
}

#iframe_02{
float:right;
}

p.iframe02 {
font-family: Comic sans MS;
font-size: 20px;
color: black;
background: #FFFACD;
}

[/code]

Here is the main page where the items are called.

[code] <!– division for cont –>
<div id=”cont”>
<div id=”iframe_con”>
<iframe name=”iframe_01″ width=”48%” height=”100%”
src=”iframe01.html” frameborder=”1″></iframe>
<!– width=”49.5%” height=”15%” –>
<iframe name=”iframe_02″ width=”48%” height=”100%”
src=”iframe02.html” frameborder=”1″></iframe>
<!– width=”49.5%” height=”15%” –>
</div>
<!– end division iframe_con –>

[/code]

If I could I would like to have the space in between the 2 iframes instead of having them right next to each other.

I have other issues with the header but I will create a different post for that.

So can someone assist me here?

Also in #CSS _↴