28234 sujets

CSS et mise en forme, CSS3

Deux colonnes proportionnelles

Bonjour.

Voici la page que j'essaie de réaliser (image jointe).

Mais j'ai une grosse difficulté avec Internet Explorer (ça marche correctement avec Firefox) : si je rétrécis la largeur du navigateur, les portions 2 et 3 viennent l'une en dessous de l'autre.

  * { margin: 0pt;
    padding: 0pt;
    }

  body { font-family: Arial,Helvetica,sans-serif;
    color: rgb(0, 0, 0);
    font-size: 76%;
    background-color: rgb(255, 255, 255);
    }

  img { border: none;
    margin: 0pt;
    padding: 0pt;
    }

  #conteneur { margin: 0px;
    padding: 0pt;
    width: 100%;
    position: absolute;
    }

/* C'est la portion 1 */

  #titre_dossier { border: 2px solid rgb(102, 102, 102);
    margin: 10px 10px 10px;
    padding: 0pt;
    position: relative;
    width: 98%;
    background-color: rgb(250, 250, 250);
    }

/* C'est la portion 2 */

  #article_de_fond { border: 1px solid rgb(102, 102, 102);
    margin: 0px 0px 10px 10px;
    padding: 10px;
    font-family: Times New Roman,Times,serif;
    font-size: 1.3em;
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 65%;
    }

/* C'est la portion 3 */

  #petits_articles { border: 1px none rgb(153, 153, 153);
    margin: 0px 10px 10px 0pt;
    padding: 0pt;
    position: relative;
    float: right;
    width: 30%;
    }

/*C'est la portion 4 */

  #pied_de_page { border: 1px dashed rgb(102, 102, 102);
    margin: 0px 10px 10px;
    padding: 10px;
    float: left;
    position: relative;
    background-color: rgb(237, 237, 237);
    clear: both;
    width: 97%;
    }


Je suppose qu'il est impossible de donner des valeurs en pourcentage à deux blocs dont l'un est dans le flux et l'autre en float: right;

Ou bien ai-je commis une autre erreur ?

Merci pour toute aide.
upload/12052-Plandepage.png
Préférer un margin-right: 35% plutôt qu'un width: 65% pour le bloc non flottant.

Sinon, pourquoi tous ces blocs en width: 97% avec des marges et padding ? C'est plutôt casse-gueule comme construction.

Pour rappel : un élément de type bloc prend naturellement toute la largeur disponible. Si on lui donne une largeur déterminée, se largeur finale ne sera plus déterminée par les marges, et les padding se rajouteront à la largeur déterminée. Pas terrible...
Florent V. a écrit :
Préférer un margin-right: 35% plutôt qu'un width: 65% pour le bloc non flottant.

Sinon, pourquoi tous ces blocs en width: 97% avec des marges et padding ? C'est plutôt casse-gueule comme construction.

Pour rappel : un élément de type bloc prend naturellement toute la largeur disponible. Si on lui donne une largeur déterminée, se largeur finale ne sera plus déterminée par les marges, et les padding se rajouteront à la largeur déterminée. Pas terrible...

Merci beaucoup. C'est tellement évident que j'ai honte de ne pas y avoir pensé tout seul !

Ca marche beaucoup mieux, même si une grande réduction de la fenêtre du navigateur aboutit à un chevauchement des blocs.

Mais ce qui m'embête (relativement à ce que tu me dis des 97%...), c'est que je n'arrive pas à éviter des débordements "hors champ" sans cela... Il se trouve que j'aime bien quand il y a une marge autour du contenu, et c'est précisément ce qui provoque les problèmes ! Smiley decu

Si ça te dit, voici l'URL où voir la maquette en construction :
http://fifracol.free.fr/Presse/Article_de_journal.html

Encore merci.

==========EDIT le 25.04.07 après 23h============

J'ai modifié un peu l'organisation : il y a bien moins de margin et de padding, et, comme prévu par Florent V., ça marche bien mieux... Smiley confused
Modifié par Piteur511 (25 Apr 2007 - 23:21)
Sujet clos
Aller à