structure de colonne CSS

Je développe un nouveau modèle d'essayer ma main à un CSS3 et HTML5 techniques ...structure de colonne CSS

Avoir un petit problème ... quand je visite cette page en utilisant Firebug, je peux voir que ma colonne lef et la colonne de droite ne sont pas encapsulées dans le div #container. Et je me rends compte que je les fais flotter tous les deux à gauche ... mais je n'arrive pas à comprendre ce que je dois faire pour les emballer dans le conteneur div ....

Voici le HTML: (lien vers la page dans le cas où est plus facile) http://www.bcidaho.com/dev-acn/index.asp

<body> 

    <div id="container"> 

    <!--#include file="_includes/top-nav-header.asp"--> 

    <!--#include file="_includes/home-nav.asp"--> 


     <div id="left-col"> 
      <p>Lef Nav Column</p> 
     </div><!-- End #left-col --> 

     <div id="main-col"> 
      <p>Main Column</p> 
     </div><!-- End #main-col --> 


    </div> <!--! end of #container --> 

    <!--#include file="_includes/footer.asp"--> 
</body>

CSS se trouve ici: (na pas envie de jeter une tonne de ce post sur css désolé) http://www.bcidaho.com/dev-acn/css/style.css

Source

2011-07-07 tony noriega

Ils sont incased. Dans firebug, ça ne lui ressemble pas parce que leurs flotteurs ne sont pas effacés. Ajoutez ceci à votre css:

.clear { 
    clear:both; 
}

et après:

<div id="left-col"> 
      <p>Lef Nav Column</p> 
     </div><!-- End #left-col --> 

     <div id="main-col"> 
      <p>Main Column</p> 
     </div><!-- End #main-col --> 
<div class="clear"></div>

Cela devrait le faire.

Source

2011-07-07 15:59:59 brenjt

appliquent overflow:hidden à "conteneur"

Source

2011-07-07 16:01:30 superjaz1

ajouter overflow: hidden;, overflow: auto; ou float: left; à div # conteneur

Source

2011-07-07 16:03:42

Si j'ajouter: float: left; cela tue la disposition et pousse le conteneur à gauche ... mais je vois toujours ce que vous voulez dire. –

@tony C'est pourquoi j'ai dit "ou". Il y a plus d'une solution. –

structure de colonne CSS

Répondre

Questions connexes