Problèmes de chevauchement de bordure CSS Float

J'essaie de faire flotter un menu à gauche de la page, et quand il devient assez grand pour atteindre le contenu ci-dessous, Firefox cogne le contenu exactement comme il se doit ... sauf pour le frontière.Problèmes de chevauchement de bordure CSS Float

Voici une capture d'écran avec quelques articles:

Et une autre avec plusieurs articles

"Box 4" est déplacé sur comme prévu, mais sa frontière reste A gauche. Oo

HTML:

 
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
     " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
      <title></title> 
      <link rel="stylesheet" href="css/main.css" /> 
     </head> 
     <body> 
      <div id="menu"> 
       <ul> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
       </ul> 
      </div> 
      <div id="title"> 
       <img src="img/logo.png" alt="logo" /> 
       <span id="title_text">Title</span> 
      </div> 
      <div id="container"> 
       <div id="box1" class="topbox"> 
        <div class="title">Box 1 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box2" class="topbox"> 
        <div class="title">Box 2 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box3" class="topbox"> 
        <div class="title">Box 3 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
      </div> 
      <div id="box4"> 
       <div class="title">Box 4 Title</div> 
       <div class="content">Content goes here<br />line break</div> 
      </div> 
     </body> 
    </html>

CSS:

#menu { 
    float: left; 
    width: 100px; 
    padding-left: 0px; 
} 

#menu ul { 
    margin: 0px; 
    padding: 10px; 
} 

#title { 
    margin-left: 100px; 
    border: 1px #F00 dashed; 
    height: 40px; 
    font-size: 20pt; 
} 

#title_text { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 5px; 
} 

#container { 
    margin-left: 100px; 
} 

.topbox { 
    width: 30%; 
    height: 200px; 
    display: inline-block; 
    margin-top: 5px; 
    margin-bottom: 10px; 
    margin-right: 2px; 
    margin: none; 
    border: 1px #F00 solid; 
} 

.topbox .title { 
    text-align: center; 
    border-bottom: 1px #000 solid; 
    padding-top: 1px; 
} 

.content { 
    padding: 2px; 
} 

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
} 

#box4 .title { 
    display: inline; 
    border-right: 1px #000 solid; 
    border-bottom: 1px #000 solid; 
    padding-left: 2px; 
    padding-right: 2px; 
} 

#box4 .content { 
    display: inline; 
}

Source

2009-08-14 Rena

Vous pouvez poster ceci sur doctype.com. C'est plus adapté à ce style de question. – Kredns

duplication possible de [Pourquoi float CSS ne modifie pas la largeur de la div suivante?] (Http: // stackoverflow.com/questions/25475822/pourquoi-ne-css-flotteur sans changement la largeur de-the-following-div) –

Vous pouvez résoudre ce problème en mettant à jour votre # règle box4 comme ceci:

#box4 { 
    border: 1px #000 solid; 
    margin-left: 100px; 
}

Modifier # box4 ci-dessous une longue sidenav css:

#box4 { 
    border: 1px #000 solid; 
    clear: both; 
}

Source

2009-08-14 02:02:09 Pat

Si je fais ça, puis lorsque le menu a quelques éléments, il y aura un écart inutile à gauche de box4. – Rena

Votre autre option, non javascript serait de pousser # box4 ci-dessous un long sidenav (exemple modifié) Si vous êtes allé avec Javascript, vous pouvez modifier le style de box4 lorsque le menu est trop long pour qu'il est bien passé à côté. – Pat

Inclure la ligne ci-dessus ci-dessus "box4" div.

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

Pour que votre code devrait ressembler à ceci:

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4"> 
<div class="title">Box 4 Title</div> 
<div class="content">Content goes here<br />line break</div> 
</div>

Vive !!!

Source

2009-08-14 08:48:35

Cela pousse effectivement box4 sous le menu. J'ai donc les trois top cases, et ce gap géant sous eux jusqu'au bas du menu. – Rena

Vous pouvez laisser flotter le # box4 à gauche ..

Il serait cependant pas la largeur de 100% ..

Comme vous udnerstand ce n'est pas réparable, puisque la largeur de 100% sera toujours pagaille Quelque chose de haut .. vous ne pouvez pas l'avoir à 100% de largeur mais ne pas prendre 100% quand poussé ...

Source

2010-01-31 03:28:00

Je pense que vous ne serez pas en mesure de le faire avec css seul parce que vous vous battez le flux normal. Les éléments sont normalement empilés les uns sur les autres et essayer de demander à l'un de s'éloigner lorsque vous descendez la page ne fonctionne pas comme cela.

Source

2010-01-31 04:07:52 Rob

box4 doit avoir une propriété clear:both; dans son css. Cela devrait faire l'affaire. Je viens de le tester et il fait ce que vous voulez.

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
    clear:both; 
}

Source

2010-01-31 04:14:49

vous avez manqué le box4 en dehors du récipient . vous pouvez vérifier l'extrait ci-dessous.

#menu { 
 
    float: left; 
 
    width: 100px; 
 
    padding-left: 0px; 
 
} 
 

 
#menu ul { 
 
    margin: 0px; 
 
    padding: 10px; 
 
} 
 

 
#title { 
 
    margin-left: 100px; 
 
    border: 1px #F00 dashed; 
 
    height: 40px; 
 
    font-size: 20pt; 
 
} 
 

 
#title_text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-top: 5px; 
 
} 
 

 
#container { 
 
    margin-left: 100px; 
 
} 
 

 
.topbox { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
    margin-right: 2px; 
 
    margin: none; 
 
    border: 1px #F00 solid; 
 
} 
 

 
.topbox .title { 
 
    text-align: center; 
 
    border-bottom: 1px #000 solid; 
 
    padding-top: 1px; 
 
} 
 

 
.content { 
 
    padding: 2px; 
 
} 
 

 
#box4 { 
 
    border: 1px #000 solid; 
 
    width: 100%; 
 
} 
 

 
#box4 .title { 
 
    display: block; 
 
    border-right: none; 
 
    border-bottom: 1px #000 solid; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    text-align:center; 
 
    
 
} 
 

 
#box4 .content { 
 
    display: inline; 
 
}

<?xml version="1.0" encoding="UTF-8"?> 
 
    <!DOCTYPE html PUBLIC 
 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
     <head> 
 
      <title></title> 
 
      <link rel="stylesheet" href="css/main.css" /> 
 
     </head> 
 
     <body> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
       </ul> 
 
      </div> 
 
      <div id="title"> 
 
       <img src="img/logo.png" alt="logo" /> 
 
       <span id="title_text">Title</span> 
 
      </div> 
 
      <div id="container"> 
 
       <div id="box1" class="topbox"> 
 
        <div class="title">Box 1 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box2" class="topbox"> 
 
        <div class="title">Box 2 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box3" class="topbox"> 
 
        <div class="title">Box 3 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box4"> 
 
       <div class="title">Box 4 Title</div> 
 
       <div class="content">Content goes here<br />line break</div> 
 
      </div> 
 
      </div> 
 
      
 
     </body> 
 
    </html>

Source

2018-01-23 09:50:21

Problèmes de chevauchement de bordure CSS Float

Répondre

Questions connexes