Positionner le fragment CSS HTML

J'ai besoin de la div #infoBar et de la div #actualCover pour m'asseoir à droite de (à côté de) la div #covers, mais pour une raison quelconque, la div divs agit comme si elle n'était même pas là et flotte au-dessus de les autres divs.Positionner le fragment CSS HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Untitled Page</title> 
     <style type="text/css"> 
      * 
      { 
       margin: 0; 
       padding: 0; 
      } 
      #chooserContainer 
      { 
       border: solid 1px orange; 
      } 
      #coverArea 
      { 
       border: solid 1px red; 
       width: 760px; 
      } 
      #covers 
      { 
       width: 150px; 
       float: left; 
       height: 600px; 
       overflow-y: auto; 
       overflow-x: hidden; 
       border: solid 2px #BFDEFF; 
       padding: 10px; 
       background-color: #F0F7FF; 
       margin-right: 30px; 
      } 
      #infoBar 
      { 
       height: 30px; 
       border: solid 1px green; 
       width: 600px; 
      } 
      #actualCover 
      { 
       width: 794px; 
       height: 1123px; 
       background-position: top left; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="chooserContainer"> 
      <div id="covers"> 
      </div> 
      <div id="infoBar"> 
      </div> 
      <div id="coverArea"> 
       <div id="actualCover"> 
       </div> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </body> 
</html>

Source

2009-09-14 Vince Panuccio

Ici vous allez.

Il est recommandé de corriger votre mise en page avant de définir le remplissage et les marges.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     * 
     { 
      margin: 0; 
      padding: 0; 
     } 
     #chooserContainer 
     { 
      background: #ccc; 
      width: 911px; 
     } 

     #covers 
     { 
      width: 150px; 
      float: left; 
      height: 600px; 
      overflow-y: auto; 
      overflow-x: hidden; 
      background-color: #0ff; 
     } 
     #infoBar 
     { 
      height: 30px; 
      width: 600px; 
      float: right; 
      background: yellow; 
     } 
     #coverArea 
     { 
      width: 760px; 
      float: right; 
      background: #f60; 
     } 
     #actualCover 
     { 
      width: 794px; 
      height: 600px; 
     } 
    </style> 
</head> 
<body> 
    <div id="chooserContainer"> 
     <div id="covers">Coveres 
     </div> 
     <div id="infoBar">InfoBar 
     </div> 
     <div id="coverArea">CoverArea 
      <div id="actualCover">ActualCover 
      </div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body> 
</html>

Source

2009-09-14 20:37:17

Dans ce cas, il semble que vous voulez #infoBar et #coverArea flotter à droite de #covers au lieu de #covers flottant à gauche des deux autres.

Essayez de prendre le flotteur hors de #covers et en ajoutant float: right; à #infoBar et #coverArea

Source

2009-09-14 13:08:01

qui ne semble pas fonctionner :-( –

at-il changé le comportement du tout? Bien sûr –

fait, les choses wen't fou. Ces deux divs que vous avez mentionnés sont allés à l'extrême droite et en dessous des couvertures div –

Répondre

Questions connexes