mise en page de contenu Page Questions

Question

Possible en double:
Make Div on right side fill out all available space

Je suis la conception d'un thème pour un blog et je vais avoir quelques problèmes en essayant d'obtenir une mise en page de travail. Voici une image de ce que je veux.

Ce diagramme représente les messages individuels et non pas le site lui-même, il sera contenu dans une boîte de son propre, permet de l'appeler .container. Aussi le violet et le vert sont dans une autre boîte, appelons-le .content. Les autres éléments seront appelés par leur couleur pour le moment.

est donc ici plus ou moins ce que le CSS ressemble:

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    width:100%; 
} 

.purple { 
    display:inline-block; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    display:inline-block; 
} 

C'est tout ce qu'il ya à l'heure actuelle. J'ai essayé float mais cela n'a fait aucun effet. Ce qui se passe est quelque chose comme ça.

est ici un peu plus de choses que vous devez savoir:

• largeur de .container ne sont pas réglées, il est auto
• .purple et .green ne pas nécessairement besoin d'être de la même taille aussi longtemps que .green ne va pas de ce côté.
• .purple peut avoir une hauteur fixe
• .green est où la viande est, c'est là le poste réel va, gardez cela à l'esprit.
• Je ne pense pas que les tables contribueront, le problème est à l'intérieur .content.

Answer 1

Utilisez les réponses à cet article pour obtenir une solution:

Make Div on right side fill out all available space

Je recommande des tables dirigées l'une parce qu'elle est la plus approche valable/travail sur presque tous les navigateurs.

Answer 2

Je suppose que toutes vos sections sont <div> éléments. Utilisation:

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    clear:both; 
    width:100%; 
} 

.purple { 
    float:left; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    float:left; 
} 

Vous pouvez aussi besoin d'ajouter <br clear="all" /> immédiatement après le div vert et avant la fermeture du content div, et un autre juste après votre content div.

Answer 3

En supposant que tout est mis en div vous devez écrire comme ceci:

.container { 
    display:block; 
    margin:0 25px; 
} 

.gray, .blue, .content { 
    display:block; 
    clear:both; 
    width:100%; 
} 

.purple { 
    float:left; 
    width:125px; 
    height:100%; 
    text-align:center; 
} 

.green { 
    float:left; 
    min-width: 125px; 
}