CSS - Floating an iframe

Question

All,

In a centred layout (960px width; margin: 0 auto;), I have two menu bars, one floated to the left & other to the right, underneath both of which I want to float an iframe.

Unfortunately, it does not appear to be floating. The iframe moves to the left most available space of the viewport. Unfortunately, I cannot use absolute positioning due to the layout being centred & having max. width of 960px.

Is there a way to make this happen please?

EDIT: Further to the comments, for which Im grateful, here is the code.

HTML:

    <iframe id="iframing" src="mannequin.html" width="640" height="500" frameborder="0" ></iframe><br />

CSS:

#container {
    min-width: 960px;
    height: 100%;
    background: rgba(255,255,255,0.8);
    margin: 0 auto;
    position: relative;
} /* The is the main container on body */

#iframing {
    float: left;
    width: 640px;
    height: 500px;
    margin: 10px auto 10px;
    clear: both;
}

Solution 1

HI all,

Its finally resolved, hurrah! I had set the width to min-width on the main container which was the reason of the iframe extending to the far end. Resolved. And thank you for helping with this. Cheers.

Solution 2

A centered layout and absolute positioning don´t exclude each other but I don´t think you need absolute positioning anyway.

As far as I can understand your question, the first thing I would do is add a clear:both to the iframe.

Does the iframe have a fixed with?

Solution 3

Take a look at this example, it should point you in the right direction: http://jsfiddle.net/WsyCb/

All you need to do to position the iframe within the centered layout is given the container a relative position and move the iframe left by the fixed width of the left content.

Additionally, as far the floats go, you might be able to fix this by selectively clearing the floats. I'm not sure of any other reason why the iframe wouldn't join the flow of the other floated elements. Try making the container overflow:auto.

Comments

[Kayote]

Jeroen, the iframe does have a fixed width & height. I have applied clear: both as well (see just posted code above) but its not making a difference.

[Kayote]

Thanks moses. I cannot use absolute positioning due to the layout being fixed & centred in the middle of the viewport (see the code posted above).