aligner horizontalement divs dans 2 colonnes différentes

Question

J'ai configuré mon site avec une disposition de base de 2 colonnes en-tête et pied de page. Sur la plupart de mes pages cela fonctionne car la colonne de gauche n'est pas connectée à droite. Cependant, sur une page, j'ai une image dans la colonne de gauche avec une description associée dans la colonne de droite. Ces deux éléments varient en hauteur, mais pas en largeur. Maintenant, je l'ai eu à travailler en plaçant un div entre les images-tout avec une hauteur définie pour compenser la différence sur le côté droit. Ça a l'air bien dans le navigateur avec lequel je l'ai testé mais quand j'ai fait un dernier coup d'œil en utilisant, par exemple, chrome, opera et firefox, j'ai trouvé que chacun rendait l'espace différemment. La hauteur de la colonne de gauche n'est pas cohérente, de sorte que les images ne correspondent pas à la description sur la droite. Je voudrais garder la disposition des 2 colonnes cohérente à travers mon site. Y at-il un moyen de compenser différents rendus de navigateur dans ce type de mise en page? Here's un lien vers la page, je l'ai lancé parce que je n'attends pas vraiment beaucoup de trafic pour le moment. Merci pour vos suggestions!

Craig

Answer 1

Les différents navigateurs rendent les choses différemment (comme les hauteurs de ligne par défaut, les marges et les tailles de police des rubriques, etc.). Pour obtenir tout à une valeur commune, vous êtes censé utiliser un reset.css. Le plus populaire et ce que j'utilise généralement dans mes projets est celui-ci: http://meyerweb.com/eric/tools/css/reset/. D'après ce que je peux voir sur votre site Web, vous n'utilisez pas un reset.css. Vous devez récupérer une copie de ce fichier (à partir du lien ci-joint), nommez-le reset.css et l'importer avant votre fichier style.css réel - dans votre cas, vous devez importer avant cette règle: @import url("site_css/craig-smith.css");

NOTE : Après l'importation de la réinitialisation, vous devrez peut-être ajuster certains craig-smith.css d'origine, mais à la fin le rendu sera semblable/cohérent dans tous les navigateurs.