Firefox CSS: Étant donné 2 divs, comment puis-je faire flotter le * second * vers la droite en utilisant le positionnement statique?

Je travaille sur un Youtube userstyle script qui affiche des commentaires côte à côte avec la vidéo afin que vous puissiez regarder la vidéo et lire les commentaires en même temps (quelle merveilleuse idée - duh). Vous pouvez voir dans les captures d'écran jusqu'où j'ai. Cela signifie que je me soucie uniquement de Firefox, et que CSS3 va. Le problème que j'ai est que je veux faire une mise en page complètement fluide et que les divs "autres vidéos" flottent vers la droite, tandis que la div du milieu (les commentaires) s'étire pour remplir l'espace restant entre la div gauche (la vidéo jouée) et la droite div (les "autres vidéos"). Traduit en CSS, le problème est: donnés divs "main", "rightnav" et "footer", dans cet ordre fixe dans le document, comment puis-je faire flotter rightnav div vers la droite, et le pied de page ci-dessous il? Le mieux que j'ai réussi à faire était de positionner "rightnav" absolument (à droite: 0), mais ensuite le pied de page passe sous la div "principale", pas en dessous des deux. J'ai déjà regardé Use CSS to reorder DIVs. Les valeurs 'top' négatives sont manquantes, car elles dépendent du contenu de la div 'main'.Firefox CSS: Étant donné 2 divs, comment puis-je faire flotter le * second * vers la droite en utilisant le positionnement statique?

Voici le code source:

<html lang="en-US"> 
<head> 
<style type="text/css"> 

#main { 
    border: 1px solid; 
    float: left; 
    margin-right: 410px; 
} 

#rightnav { 
    background-color: yellow; 
    opacity: 0.5; 
    border: 1px dotted; 
    width: 400px; 
    float: right; 
    position: absolute; 
    right: 0; 
} 

#footer { 
    clear: both; 
} 

</style> 
</head> 
<body> 

<div id="baseDiv" style="width: 100%"> 
    <div id="main"> 
    <script>for (var i=1; i<100; i++) document.write('main ');</script> 
    </div> 

    <div id="rightnav"> 
    <script>for (var i=1; i<200; i++) document.write('rightnav ');</script> 
    </div> 

    <div id="footer"> 
    <script>for (var i=1; i<100; i++) document.write('footer ');</script> 
    </div> 

</div> 

</body> 
</html>

Espérons qu'il est clair ce que je veux atteindre: le « pied de page » ci-dessous les deux divs, et le « principal » fluide div.

Merci pour vos idées.

Source

2008-11-18 Dan Dascalescu

Vous ne devriez pas avoir besoin de position: absolute; sur votre div main droite, ni le droit: 0; positionnement. Flottant le div juste à côté d'un autre flotté à gauche (et avec la marge définie comme vous avez), ils devraient se retrouver de chaque côté de la fenêtre du navigateur avec la main gauche div expansion pour remplir l'espace disponible (en dehors de l'écart de 10px créé par votre marge). Lorsque vous positionnez «absolument» un objet, vous le retirez effectivement du flux normal du document et il n'occupe plus d'espace (ni ne «pousse» d'autres objets). Je soupçonne que simplement enlever le positionnement de la main droite div tout en restant clair: les deux; sur le pied de page va résoudre votre problème. Vous devrez peut-être également permuter l'ordre des divs main gauche et droite dans le code source, de sorte que float: right; l'objet vient avant le flotteur: à gauche; article. Bonne chance!

P.S. M'a toujours ennuyé aussi que vous ne pouvez pas regarder des vidéos et lire des commentaires en même temps sur YouTube!

Source

2008-11-18 11:35:26

Ce fut la première solution que j'ai essayé, mais ça ne marche pas: la div de rightnav ne monte jamais au sommet de 'baseDiv', mais reste en dessous de la div 'principale'. –

Vous devez également permuter l'ordre dans lequel les divs apparaissent dans le code source afin que la div de gauche apparaisse après la div de droite. Et je ne pense pas que vous ayez besoin de la marge droite non plus. –

Comment cela s'est-il passé à la fin, avez-vous trouvé une solution? –

#main { 
    border: 1px solid; 
    width: 50%; 
    float: left; 
} 

#rightnav { 
    background-color: yellow; 
    opacity: 0.5; 
    border: 1px dotted; 
    width: 48%; 
    float: right; 
} 

#footer { 
    clear: both; 
}

ça va le faire

edit: si vous dites liquide qui signifie habituellement pour cent dimensions à base, commencer à associer des choses comme ça dans votre tête

Source

2008-11-18 11:51:48 annakata

Wow. Je n'ai pas dit "liquide"; J'ai dit que je voulais seulement que la div principale soit fluide, c'est-à-dire qu'elle se développait pour remplir l'espace restant entre la div gauche (la vidéo jouée) et la div droite (les "autres vidéos"). Le div 'rightnav' est fixé à 400px et cela n'a aucun sens de le rendre liquide. –

alors votre solution est la même mais avec un nouveau 400px div comme élément enfant de #rightnav (les termes liquide et fluide sont interchangeables) – annakata

Cela peut ou ne peut pas résoudre votre problème, 3 colonnes dimensionnées par pourcentages utilisent des flotteurs, contenant des tailles div verticalement pour accomander le plus grand des 3 panneaux, les flotteurs doivent apparaître en première ligne avant le panneau central, IE fonctionne marrante avec ceci, pense que cette disposition est naturellement inline, IE hack peut être vu dans le style . Cela fonctionne bien pour beaucoup de choses, d'autres éléments marginaux du centre peuvent apparaître (#mid_con) et vont s'empiler, seul le problème est que si les hauteurs gauche et droite du panneau sont plus courtes que le premier panneau central, le second panneau central occupera tout #tub_con de la largeur cuz est 100% apparaissant empilé directement sous le premier div central. Cela peut être corrigé en donnant une largeur statique à (#mid_con), il sera toujours centré et restera de la même taille, peu importe si IE le centre dans l'espace restant après les flottements ou le centre sur toute la largeur. si on lui donne une largeur statique IE bidouille pas nécessaire, jouez avec et amusez-vous.Semble que flotteur ne supprime pas un div complètement de flux normal dans IE, semble elle pousse simplement les éléments de passer à apparaître et se conformer à gauche et à droite des deux flotteurs,

<!--BEGIN HEADER--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>float3col demo</title> 

<style> 
    #tub_con{ 
    display:block; 
    position:relative; 
    text-align:center; 
    width:500px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    border: solid #000000; 
    } 

    #left_nav{ 
    display:block; 
    position:relative; 
    float:left; 
    height:80px; 
    width:30%; 

    max-width:30%; 
    border: solid #000000; 
    } 
    #right_nav{ 
    display:block; 
    position:relative; 
    float:right; 
    height:80px; 
    width:30%; 
    border: solid #000000; 
    } 
    #mid_cont{ 
    display:block; 
    position:relative; 
    padding-top:5px; 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; 
    width:35%; 
    border: solid #f86fff; 
    } 
    *html #mid_cont{ 
    display:block; 
    position:relative; 
    padding-top:5px; 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; 
    width:100%; 
    border: solid #f86fff; 
    } 

</style> 
</head> 

<body style="text-align:center;"> 
<div id="tub_con"> 
<div id="left_nav"></div> 
<div id="right_nav"> 
</div> 
<div id="mid_cont"> 
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div> 

<!--Test the stacking problem 
     <div id="mid_cont"> 
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div>--> 

<div style="clear:both;"></div> 
</div> 

<p style="width:100px; border:solid #000000; margin-left:auto; margin-right:auto;"> 
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</p> 
</body>

Source

2010-01-11 00:44:14 Shawn

Firefox CSS: Étant donné 2 divs, comment puis-je faire flotter le * second * vers la droite en utilisant le positionnement statique?

Répondre

Questions connexes