Conditions de la propriété display: inline-block

Bonjour à tous,

J'ai un souci avec la propriété display inline-block. Effectivement, Je souhaite obtenir cette structure: http://www.mediafire.com/view/59ufa37idpq57a8/Architecture%20souhaite%CC%81e.png
mais obtiens ceci:
http://www.mediafire.com/view/6iud961tgojj14c/Architecture%20obtenue.png

_____________________________________________________________________________________

Je vous retransmets le code textuellement:

HTML

<div class="header"</div>
<div class="Offre1"><</div>
<div class="Offre2"></div>
<div class="Offre3"></div>
<div class="Offre4"></div>

CSS

.header {
display: block;
width: 100%;
height: 95px;
padding: 0;
margin: 0;
border: 0;
background-color: rgba(251,251,251,1.00);
}

.Offre1 {
display: inline-block;
width: calc(100vw / 2) ;
height: calc((100vh - 95px) / 2);
padding: none;
margin: none;
border: none;
background-color: rgba(193,193,193,1.00);
}

.Offre2 {
display:inline-block;
width: calc(100vw / 2) ;
height: calc(100vh - 95px) ;
padding:none;
margin:none;
border:none;
background-color:rgba(193,193,193,1.00);
}

.Offre3 {
display:inline-block;
width: calc(100vw / 2);
height: calc((100vh - 95px) / 2);
padding:none;
margin:none;
border:none;
background-color:rgba(193,193,193,1.00);
}

.Offre4 {
display:inline-block;
width: calc(100vw / 2) ;
height: calc((100vh - 95px) / 2);
padding: none;
margin: none;
border: none;
background-color: rgba(193,193,193,1.00);
}

Merci d'avance pour le temps consacré à ma question.
Modifié par 6l20 (26 Nov 2015 - 16:39)

Plop !

Un petit classique : les espaces insécables !

Exemple : https://jsfiddle.net/Undless/j2mo2evc/

Article avec la(les) solution(s) : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Bonne lecture !
Modifié par _laurent (26 Nov 2015 - 15:35)

Et au passage :

1 - Une petite erreur de frappe (à la recopie ici j’espère)

<div class="header"</div> <!-- Ici il manque un ">" sur la balise ouvrante -->
<div class="Offre1"><</div> <!-- Ici il y a un "<" en trop entre les balise, sauf si c'est un texte voulu -->
<div class="Offre2"></div>
<div class="Offre3"></div>
<div class="Offre4"></div>

2 - Plutôt que de faire 4 classes strictement identiques (chient à maintenir et a lire) tu devrais en faire une seule commune, c'est à ça que servent les classes CSS (+ 4 spécifiques si besoin) :

<div class="header"></div>
<div class="offre offre1"></div>
<div class="offre offre2"></div>
<div class="offre offre3"></div>
<div class="offre offre4"></div>

.header {
    display: block;
    width: 100%;
    height: 95px;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: rgba(251,251,251,1.00);
}

.offre {
    display: inline-block;
    width: calc(100vw / 2) ;
    height: calc((100vh - 95px) / 2);
    padding: none;
    margin: none;
    border: none;
    background-color: rgba(193,193,193,1.00);
}

3 - Utilise les balises "code" quand tu poste ! C'ets plus joli et facile a lire !
Modifié par _laurent (26 Nov 2015 - 15:44)

Merci les amis pour la réactivité de vos réponses et l'apport de ces quelques conseils. Je vais bidouiller avec ces nouvelles infos.