Mise en page 2 colonnes simples

Question

J'ai essayé d'obtenir ce droit pour les 3 derniers jours maintenant ... Tout ce que je veux est simple 2 colonnes sur mon site Web avec la barre de menu sur la gauche. Le problème est que je n'arrive pas à afficher la colonne de contenu en ligne avec la colonne de menu. Peu importe ce que j'essaie, il ne s'aligne que sur la bordure inférieure de la colonne du menu.

J'utiliserais des marges négatives, mais je n'aime pas l'idée de faire de la barre de menu une hauteur fixe. Float et Clear ne sont pas aider du tout ...

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; margin-left: 200px; width: 790px; } 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div> 

que quelqu'un peut me dire ce que je fais mal? MISE À JOUR: Juste pour voir exactement ce qui se passe, j'ai changé la couleur de .content et j'ai regardé où c'est exactement. Il semble que le bloc lui-même est correctement positionné, mais que le contenu de ce bloc (le contenu réel de la page) se trouve au bas du bloc .sidebar ...

Answer 1

Vous ne voulez probablement pas faire flotter le contenu div. La marge de gauche s'assurera qu'il efface le menu et que tout contenu au-delà de la hauteur du menu est indenté en conséquence.

Try this ...

.wrapper .sidebar { float: left; clear: left; display: block; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { margin-left: 200px; width: 790px; } 

En outre, comme azram19 remarqués, la largeur totale du menu et le contenu dépasse 1000px. J'ai enlevé le rembourrage pour résoudre ce problème.Il y aura toujours un écart de 9px entre votre menu (191px de large) et votre contenu (200px de marge gauche).

Si vous avez besoin du rembourrage (par exemple, si les divs ont des couleurs ou des images d'arrière-plan), veillez à réduire la largeur des deux div de 10px.

Answer 2

Ceci pourrait être dû au manque de min-height propriété, howerver, jetez un oeil à:

Super Simple Two Column Layout

The Demo

Ou voir:

Simple 2 column CSS layout

Pour avoir une idée et comment faire cross-browser :)

Answer 3

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6;} 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; width: 789px;} 

Ce code fonctionnera. En ayant margin-left:200px en .content vous avez fait sa largeur - 200 + 790 + 10 = 1000px. Et après avoir enlevé cela, j'ai dû diminuer la largeur de l'une des colonnes parce que la largeur de la colonne de gauche était 190+10+1(border) et ils ne pouvaient pas entrer dans 1000px largeur .wrapper.

Answer 4

Une grande partie du code est redondante. Si vous enlevez les parties inutiles, vous obtenez un début de travail:

CSS:

#wrapper { margin-left: 100px; width: 1000px; border: 1px solid #bcbcc6; border-top:none; } 
#sidebar { float: left; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
#content { padding: 5px; margin-left: 200px; width: 790px; } 

HTML:

<div id="wrapper"> 
    <div id="sidebar"> 
    </div> 
    <div id="content"> 
    </div> 
    <br style="clear:both"> 
</div> 

Notez que je me suis tourné tout wrapper, sidebar et content en ID, car ils sont uniques pour une page donnée. Les classes sont là pour être réutilisées plusieurs fois par page.

Answer 5

Il n'est pas nécessaire d'effacer la gauche et les droits ou la marge de gauche sur le contenu. Veillez également à ce que lorsque vous ajoutez un remplissage et une bordure qui s'ajoute à la taille globale de la boîte. Donc, votre emballage de 1000 largeurs contenait des boîtes de plus de 1000 pixels, poussant la boîte de contenu vers le bas. La barre latérale est: 190px (largeur) + (rembourrage 5px (les deux côtés)) 10px + 1px (bordure) = 201px total. J'ai supprimé les effacements et réduit la colonne de contenu à 789px pour compenser la bordure 1px sur la barre latérale.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; 
charset=iso-8859-1"> 
    <title>Untitled</title> 
</head> 
<body> 

<style type="text/css"> 
.wrapper { 
margin-left: 100px; 
width: 1000px; 
border-left: 1px solid #bcbcc6; 
border-right: 1px solid #bcbcc6; 
border-bottom: 1px solid #bcbcc6; 
} 
.wrapper .sidebar { 
float: left; 
display: block; 
padding: 5px; 
width: 190px; 
border-right: 1px solid #b6bcc6; 
} 
.wrapper .content { 
float: left; 
position: relative; 
padding: 5px; 
width: 789px; 
} 
</style> 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     content 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div> 

</body> 
</html> 

Answer 6

Mieux vaut tard que jamais. Je pensais que cela pourrait aider:

Les htmls

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

Le csss

#content { background-color: #F1EBD9; } 
#left { float: left; width: 14em; } 
#right { margin-left: 14em; background-color: #FFF; } 

Vous pouvez voir ce @http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout