2012-05-23 14 views
5

Ich weiß, dass es viele Fragen dazu gibt, und ich habe viele Lösungen ausprobiert, aber ich kann es nicht zum Laufen bringen. Ich habe zwei divs in einer Facebook-Canvas-Seite (810px), und ich möchte, dass sie nebeneinander angezeigt werden. Momentan ist einer über dem anderen. Hier ist mein Code:berüchtigte Two Divs nebeneinander

<div class="tab_content tab1" > 
<div id="dialerdiv1" style="float: left; margin-right: 405px;"> 
    <embed type="application/x-shockwave-flash" wmode="opaque" 
    src="thesource" 
    width="301" 
    height="401" 
    id="popUpSwf" 
    name="popUpSwf" 
    quality="high" 
    border="none" 
    allowscriptaccess="always" 
    pluginspage="http://www.adobe.com/go/getflashplayer" 
    scale="noscale" 
    menu="false" 
    flashvars="..." /> 
</div> 
<div id="dialerdiv2" style="float: right; width: 405px;"> 
     <embed type="application/x-shockwave-flash" wmode="opaque" 
     src="thesource" 
     width="301" 
     height="401" 
     id="popUpSwf" 
     name="popUpSwf" 
     quality="high" 
     border="none" 
     allowscriptaccess="always" 
      pluginspage="http://www.adobe.com/go/getflashplayer" 
     scale="noscale" 
     menu="false" 
     flashvars="..." />    
</div> 
</div> 

Wie bekomme ich diese beiden innerhalb divs nebeneinander? Außerdem habe ich versucht, eine Tabelle, und es funktioniert, aber Firefox verschiebt diese td Zellen auf der Außenseite des Canvas-Bereich und ich kann sie nicht zentriert bekommen (nur Firefox)

Dank

Antwort

5

Wenn das übergeordnete div <div class="tab_content tab1"> hat mehr als 810px verfügbar in der Breite dann sollte der folgende Code vollkommen in Ordnung sein.

<div class="tab_content tab1"> 
    <div id="dialerdiv1" style="float: left; width: 405px;"> 
     <embed ... /> 
    </div> 
    <div id="dialerdiv2" style="float: left; width: 405px;"> 
     <embed ... />    
    </div> 
    <div style="clear: both;"></div> 
</div> 
+0

Danke. Ok, es hat nicht wirklich funktioniert, aber du hast mich in die richtige Richtung gebracht. Erstens, # Dialerdiv2 Ich setzte auf float: richtig; (aber ich bin mir sicher, dass du das meinst) und ich setze das main div auf width: 810px; und die zwei inneren divs zu Breite: je 405px. Was nützt das 3. div (style = "clear: both;")? Cuase Ich nahm es heraus und machte keinen Unterschied? Aber danke, du hast mir wirklich sehr geholfen – DextrousDave

+0

Nein, ich meine 'float: left' auf' # dialerdiv2'. Das dritte div ist, was ich immer benutze, um Unordnung zu vermeiden. Also, verwenden Sie Firebug oder einen Inspektor, um zu überprüfen, ob es einen zusätzlichen Abstand/Rand irgendwo gibt, wie die andere Antwort suggeriert, und dass die Eltern-div-Breite ausreicht, um die untergeordneten divs zu enthalten - versuchen Sie, die Breite der untergeordneten divs zu reduzieren. – Salman

0

Haben Sie den Körperrand und die Polsterung entfernt?

body{margin:0;padding:0} 
2

Wenn Sie die Breite der zweiten Div ändern, sollte es funktionieren.

<div id="dialerdiv2" style="float: right; width: 370px;"> 

auch sollte es wie funktioniert dieses

  <div id="dialerdiv1" style="float: left; margin-right: 390px;"> 
      ...... 
     </div> 
     <div id="dialerdiv2" style="float: right; width: 390px;"> 
      ........ 
     </div> 

Das Problem von der Größe Ihres divs und dem verfügbaren Raum kommt. Spielen Sie ein wenig mit ihnen und Sie werden herausfinden, was die richtigen Werte zu verwenden sind

Verwandte Themen