Conversion de modèles de XHTML 1 à HTML5, erreur CSS

Question

Il s'agit d'un modèle simple à trois colonnes, avec des barres latérales sur les côtés gauche et droit et un contenu au centre. Je ne suis pas capable de comprendre l'espacement entre les colonnes, il y a trop d'espace entre la colonne de contenu (post) et la barre latérale droite.

[side-bar] [content/ post/matter]_____space/gap___[side-bar] 

Je ne suis pas en mesure de réduire/supprimer le « _space/gap » pour rendre le modèle ressemble

[side-bar] [content/ post/matter] [side-bar] 

Avant de poster cela ici, je l'ai essayé outil développeur chrome pour le savoir et le refactoriser, je n'ai pas été capable de le comprendre.

JSFiddle Example

Answer 1

Modifier cette section de votre code:

#right { 
float: right; 
width: 180px; 
padding: 10px 30px 10px 0; 
} 

à ceci:

#right { 
float: left; 
width: 180px; 
margin-left: 10px; 
padding: 10px 30px 10px 0; 
} 

droit flottant tiendra ce conteneur à la position la plus à droite, il peut atteindre dans son propre conteneur.