J'aimerais que s'affiche au milieu de mon site trois articles en mode "colonnes" (avec des largeurs différentes) comme ce n'est pas tout à fait le cas ici : http://dauphineonair.com/index-newdesign.html et comme je suis un gentil garçon j'utilise au maximum les balises html5 (les articles dans des balises articles etc.). J'ai d'abord essayé avec un column-count mais ça n'a pas marcher (sans doute parce que ça s'applqiue à des balises <p>).
Ensuite j'ai essayé de mettre des margin : 0 auto; un peu partout (sur le bloc "conteneur" des trois articles puis sur chacun des blocs articles). Ca marche pour aligner les gros bloc conteneur sur ma page (ouf) mais pas pour que mes articles se rapartissent bien dans tout le bloc.
Je me dis alors que je vais y aller "avec un marteau piqueur" et j'arrive à ce code là :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section id="maincontent">
            <article>
                <h1>Un premier article</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
 
            <article class="alaune">
                <h1>Un deuxième article plus important</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
 
            <article>
                <h1>Un troisième article</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
        </section>

et le css qui va avec :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
/*design du contenu principal de la page d'acceuil*/
 
#maincontent{
    /*on centre le contenu principal au milieu de la page*/
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
 
#maincontent article{
    /*prevu pour trois articles en mode "colonne"*/
    display: inline-block;
    width: 25%;
    /*margin: 10px;*/
    padding: 5px;
    padding-top: 20px;
    margin-top: -15px;
    margin-left: 2.5%;
    margin-right: 2.5%;
    vertical-align: top;
    height: 500px;
    overflow: hidden;
 
 
    /*on regle les bordures*/
    border: 2px solid black;
    border-top: none;
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}
 
#maincontent article.alaune{
    width: 40%;
    margin-left: 0px;
    margin-right: 0px;
}

Persuadé que ça va marcher (d'autant plus que je sais depuis maintenant quelques années que 25*2+40+4*2.5 = 100) mais pas très content de moi parce que je trouve ça assez moche. Et pourtant ça ne marche pas

Donc je cherche :
1° à savoir pourquoi pour un navigateur 25*2+40+4*2.5 != 100
2° à trouver une solution plus élégante à mon problème (je pense qu'en bidouillant avec les virgules les valeurs des margin je vais y arriver mais ça me pique les yeux rien que d'y penser)