2011-02-01 9 views
1

すべて、CSS - 中心レイアウトでIFRAME

(;マージン960ピクセル幅幅:0自動;)フローティング、私は2つのメニューバーを持っているが、一方がどちらの下に、左から右へ&他に浮い私はiframeをフロートしたい。

残念ながら、浮遊しているようには見えません。 iframeは、ビューポートの最も左側にあるスペースに移動します。残念ながら、レイアウトが中央にあるので、絶対配置は使用できません&幅は960ピクセルです。

これを行う方法はありますか?

EDIT: さらに、感謝の意を表すコメントには、コードがあります。

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

"float"とはどういう意味ですか? –

+2

フロートをiframeに設定していますか?浮動小数点をクリアするのはどうですか?この場合、コードを投稿すると非常に役に立ちます。 – bobbywilson0

+0

あなたが達成しようとしているもののイメージも同様に役立ちます。 – jeroen

答えて

1

hl全て、

最終的に解決された、ハレイ!私は、メインのコンテナの幅を最小幅に設定しました。これは、iframeが遠端まで伸びている理由です。解決されました。そして、これを手伝ってくれてありがとう。乾杯。

1

中心に配置し、絶対位置ドントがお互いを除外するが、私はあなたがとにかく絶対位置が必要だと思うドント。

私があなたの質問を理解できる限り、最初に行うことは、clear:bothをiframeに追加することです。

iframeには固定値がありますか? http://jsfiddle.net/WsyCb/

あなたが中心のレイアウト内のiframeを配置するために必要なすべてのコンテナに相対的な位置を与えられているとiframeを左に移動します。

+0

Jeroen、iframeは固定幅と高さを持っています。私はクリアを適用しました:どちらも同様です(上記のポストされたコードを参照してください)が、違いはありません。 – Kayote

1

この例を見てみましょう、それは正しい方向にあなたを指している必要があります左のコンテンツの固定幅で除算します。

さらに、浮動小数点数が増えるにつれて、浮動小数点を選択的にクリアすることでこれを解決できる場合があります。 iframeが他の浮動要素の流れに加わらない他の理由はわかりません。コンテナがオーバーフローするようにしてください:auto。

+0

ありがとう。ビューポートの中央にレイアウトが固定されているため、絶対配置は使用できません(上記のコードを参照してください)。 – Kayote

関連する問題