Aligning iFrames

Horizontal alignment of elements

[erika1959]

I'm a week into scaling the learning heights that are with XHTML and CSS, and just about feel I've left base camp (OK, I'm mixing metaphors desparately), but have run up against a problem that would be a breeze if I were able to use tables....

I'm trying to place 2-3 Amazon ads horizontally next to each other (i.e in a row). These ads are in an <iframe>, but essentially, they appear as tables 240px x 120px.

I've had managed to correctly align the ads using the basic code and styles below, but this only works for one page - despite the dimensions of all ads being identical, the iframes appear misaligned if I try to apply the style across several pages.

I'm applying the following formula (not actual code, which I imagine would breach the forum's Charter) to XHML pages;

<div id="amazon1">

iframe marginwidth="0" marginheight="0" width="120" height="240" scrolling="no" frameborder="0" src="http://site.com</iframe>

<p="amazon2"> <iframe marginwidth="0" marginheight="0" width="120" height="240" scrolling="no" frameborder="0" src="http://site.com</iframe> </p>

<p="amazon3"> <iframe marginwidth="0" marginheight="0" width="120" height="240" scrolling="no" frameborder="0" src="http://site.com</iframe> </p>

</div>

and CSS;

#amazon1 {}

p.amazon2 {}

#amazon1 p.amazon2 {
margin-top: -270px;
margin-left: 30%;}

p.amazon3 {}

#amazon1 p.amazon3 {
margin-top: -320px;
margin-left: 60%;}

Now, I know this represents an absolute mess on many levels, but it's the only formula which gives me anything approaching the layout I'm looking for - except it only works for one page.

I imagine that what I need to do is place all three amazon elements in a parent element and make them refer to that parent element for vertical alignment, so that they aren't put out of kilter by whatever else is happening on a given page, but I can't work out how to do it - all attempts have the amazon elements either shooting up to the top of the page, or stacking themselves one below another.

Would greatly appreciate any help available!

[SuzyUK]

Hi erika1959

In theory it should actually be very easy because <iframe>'s are inline elements anyway, as in they will naturally display side by side rather than stack up.

the <p> element is the block element that is causing your line breaks.. the div id="amazon1" should be the only thing which dictates their vertical position on the page once the iframes are all inside this they can be styled using less CSS code too ;)

Try this to see if it works in your scenario {borders are optional and just need to be removed in the CSS, they're there for visual reasons..

CSS:
#amazon1 {border: 1px solid red; padding: 5px;}
#amazon1 iframe {width: 240px; height: 120px; margin: 0; border: 1px solid blue;}

HTML:
<div id="amazon1">
<iframe scrolling="no" frameborder="0" src="http://www...."</iframe>
<iframe scrolling="no" frameborder="0" src="http://www...."</iframe>
<iframe scrolling="no" frameborder="0" src="http://www...."</iframe>
</div>

Suzy

[erika1959]

Hi Suzy,

I thought for one breath-taking minute that your fix had done the trick. After playing around a little with the dimensions, I had a passably good set of iframes lined up side-by-side.

However, when I tried pasting the exact same code to other pages, they appear with a line break as before - i.e are stacked one above the other (with allowances for the padding/margins imposed by CSS.

So, it looks like it's back to the drawing board. I'm sure this is possible - seems a relatively simple task.

Thanks a million for your suggestion anyway.

Erika.