IE7/IE8 Mise en page compatible avec le rendu compatible

Question

J'ai un site avec une barre latérale droite et une zone de contenu principale gauche. Code ressemble à ceci:

<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="leftside">leftsidecontent</div> 
<div class="rightside">rightsidecontent</div> 
<div class="rightside">rightsidecontent</div> 
<div class="rightside">rightsidecontent</div> 

avec

.leftside 
{ 
    float:left; 
    width:710px; 
} 
.rightside 
{ 
    margin-left:720px; 
} 

(voir site réel à http://blog.stephenkiers.com/)

raison, il est codé de cette façon est ainsi que parce que le leftsidecontent est important et je veux être premières données accessibles aux visiteurs malvoyants; au lieu d'avoir à sauter toutes les peluches à chaque fois!

Le code fonctionne dans FF, IE8, Safari etc; mais dans IE7 les div divisés effacent les divs flottants.

J'aimerais beaucoup de vos suggestions. J'ai quelques idées sur la façon de le réparer; mais ils impliquent tous de très grosses réécritures.

merci!

Answer 1

pourquoi ne pas essayer envelopper la substance du contenu en deux colonnes comme celui-ci example

Le CSS:

.leftside { 
    float:left; 
    width:710px; 
} 

.rightside { 
    float: left; 
    margin-left: 20px; 
} 

.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; } 

Le code HTML:

<div class="leftside"> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>main stuff goes here</p> 
    </div> 
</div> 
<div class="rightside"> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
    <div class="contentBlock"> 
    <p>secondary stuff goes here</p> 
    </div> 
</div> 

De cette façon, la Leftside et rightside sont juste des éléments de mise en page et sont isolés du contenu.

Un autre bon conseil pour les visiteurs ayant une déficience visuelle est d'avoir des liens en haut de la page pour permettre aux utilisateurs de passer directement aux sections de contenu et les cacher de votre mise en page avec CSS:

.skipToLinks { position: absolute; top: -100px;}