diviser la zone "contenu" en deux colonnes?

Je cherche à faire la transition à partir des tableaux HTML pour la pure mise en page CSS. Jusqu'à présent, la seule chose qui m'échappe c'est comment à disposition une page correctement.

Je peux le faire:

  • en-tête
  • de navigation de gauche
  • contenu
  • pied de page

Donc comme ceci:

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

Cependant, sur certaines pages, je veux être capable de diviser le "contenu" de la zone en quelque chose comme ce qui suit:

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

Ce que quelqu'un sait comment faire quelque chose comme ce serait le cas? Ou même un joli site web qui permet à ce genre de chose?

source d'informationauteur Fittersman

  1. 32

    premier aperçu de la mise en (démo en ligne):

    diviser la zone

    html: 

    <div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>

    css: 

    /* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

    Deuxième aperçu de la mise en (démo en ligne):

    diviser la zone

    html est assez similaire à la première mise en page, mais nous incluons un wrapper pour #content-wrap: 

    <div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>

    css est également similaire, par la façon dont nous avons ajouté quelques css règles de cibler de nouveaux div: 

    /* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

    mise à jour: amélioration de styles

  2. 2

    Donner un de la grille CSS systèmes. Ce site répertorie quelques-uns:10 Vraiment Remarquable et Utile CSS Systèmes de Grille

  3. 2

    http://grids.heroku.com/fluid_grid?column_amount=3

    Vous pouvez ajouter et supprimer ces grilles.

  4. 2

    Pour votre contenu div définir une largeur puis créez trois divs pour l'info sections.

    Les deux premiers de donner une largeur et assurez-vous qu'ils ne dépassez pas le total du contenu du conteneur.
    flotter un à gauche et l'autre droite.

    sous les divs ajouter:

    <div class="clear"></div>

    Le css pour que est:

    .clear {clear:both;}

    Sous le clair sera votre troisième div qui vous donnera la disposition que vous voulez.

  5. -2

    Ajouter une autre table interne dans le contenu de la colonne. Faire de cette table en tant que serveur (runat="server). Spécifiez la condition dans le fichier code-behind, et de rendre le tableau visible comme faux ou vrai. Voici mon exemple contient une table imbriquée. Et je me cache quand je l'ai eu à une condition spécifique via le fichier code-behind, sur des événements spécifiques.

    par exemple:

    <body>
    <form id="form1" runat="server">
    <div>

        <table >
            <tr>
                <td colspan="2">
                    header</td>
            </tr>
            <tr>
                <td style="height:50px;">
                    left nav
                </td>
                <td>
                    content

                    <table class="style1" id="innertab" runat="server">
                        <tr>
                            <td>
                                info</td>
                            <td>
                                info</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                other info</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    footer</td>
            </tr>
        </table>

    </div>
    </form>
</body>

    Fichier Code-behind:

    protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["value"].ToString == ValueType)
            {
                innertab.Visible = false;
            }
        }