28173 sujets

CSS et mise en forme, CSS3

Soucis avec float

Bonjour à tous ,

je vous demande votre aide pour la position d'objets flottants.

Mon soucis c'est que je voudrais positionner deux tableaux l'un à coté de l'autre mais j'ai un bug sous ff mais pas sous IE.

Je vous joint les deux images pour témoigner de bug et le code source.

Images

Sous FF : http://mezimages.com/image/toto/Screenshot%20-%2015_05_2006%20, %2014_38_36.png

Sous IE :
http://mezimages.com/image/toto/Screenshot%20-%2015_05_2006%20, %2014_38_40.png



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Test</title>
        <style type="text/css">
            .textGras{
                font-weight: bold
            }
            
            .ligneDossier{
                background: #D6D6F5;
                width: 100%;
            }
            .caseGauche{
                float:left;
                width:50%;
            }
            
            .caseDroite{
                float:left;
                width:auto;
            }
            
            .case{
                width:100%;
            }
            
            table{
                width: 100%;
            }
            table td.titre{
                text-align:center;
                font-weight: bold;
                background: #4A4A61;
                color: #fff;
            }

        </style>
    </head>
    <body>
<div class="ligneDossier">
            <div class="caseGauche">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2" class="titre">Identification</td>
                    </tr>
                    <tr>
                        <td>Nom,Pr&eacute;nom</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>N&eacute;(e)&nbsp;le</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Sp&eacute;cialit&eacute;</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Grade</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Position actuelle</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Stagiaire</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Acad&eacute;mie</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                </table>
            </div>
            <div class="caseDroite">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2" class="titre">Anciennet&eacute;s</td>
                    </tr>
                    <tr>
                        <td>Nom,Pr&eacute;nom</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>N&eacute;(e)&nbsp;le</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Sp&eacute;cialit&eacute;</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Grade</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Position actuelle</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Stagiaire</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                    <tr>
                        <td>Acad&eacute;mie</td>
                        <td>$$$$$$$$$$$$$$$$$</td>
                    </tr>
                </table>
            </div>
            <p style="clear:both;"></p>
        </div>

Modifié par cyberchrix (15 May 2006 - 15:01)
Sujet clos
Aller à