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;
}

Are you setting the float on the iframe? What about clearing the float? Posting your code would help immensely in this case. — bobbywilson0, Feb 01 '11 at 23:16
An image of what you are trying to achieve would help as well. — jeroen, Feb 01 '11 at 23:17
Please provide more code, including the two colums and significant parent elements, or better still put something up on http://jsfiddle.net — Jon P, Feb 02 '11 at 04:32
Similar: [How to float text next to iframe](https://stackoverflow.com/questions/19816451/how-to-float-text-next-to-iframe) — Vadzim, Feb 27 '19 at 20:52

score 4 · Accepted Answer · answered Feb 02 '11 at 10:07

4

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.

answered Feb 02 '11 at 10:07

Kayote

14,579
25
85
144

score 1 · Answer 2 · answered Feb 01 '11 at 23:15

1

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?

answered Feb 01 '11 at 23:15

jeroen

91,079
21
114
132

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 Feb 02 '11 at 04:25

score 1 · Answer 3 · answered Feb 01 '11 at 23:19

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.

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). — Kayote, Feb 02 '11 at 04:26

CSS - Floating an iframe

3 Answers3