Ten si on peut trouver une solution sans ajouter de code spécialement pour i.e ça me va parfaitement. Je mets mon code pour que vous puissiez jeter un oeil.
La page où mes .col4 (la troisième colonne flotte sous les deux première et la taille de police est énorme) et .col6 (prennent toute la largeur de la page et se superposent) déraillent :
<?php
/*
Template Name: Mon expertise
*/
?>
<?php get_header() ?>
<div class="container-fluid page">
<!-- POST -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section class="row-fluid single_post">
<div>
<h4>Une triple formation et des expériences complémentaires</h4>
<h5>Un profil à la fois littéraire et marketing<h5/>
<h5>pour vous assurer des contenus clairs et adaptés à vos cibles.<h5/>
</div>
<div class="col4 bkg-jaune expertise1">
<p>Forte d’une triple formation en classe préparatoire littéraire, en école de communication et en école de commerce,
je souhaite apporter à vos projets <strong>une vision aussi complète que possible, nourrie par des approches complémentaires</strong>.</p>
</div>
<div class="col4 bkg-jaune margin expertise2">
<p>Les différentes missions que j’ai réalisées en agence et en entreprises me permettent d’<strong>identifier clairement les problématiques
liées à des secteurs d’activités très variés</strong> (assurances, industries, grande consommation, éducation, jeunesse, transports, culture…).</p>
</div>
<div class="col4 bkg-jaune expertise3">
<p>Le fait d’avoir été du côté de l’<strong>équipe éditoriale</strong> et de l’<strong>équipe marketing</strong> constitue aujourd'hui un vrai avantage pour cerner les enjeux et les
contraintes propres à chacun tout en essayant d’offrir la solution la plus adaptée.</p>
</div>
</section>
<section class="row-fluid single_post" id="">
<div>
<h4>Des compétences en référencement et une maîtrise des outils d’édition</h4>
<h5>Des connaissances essentielles pour assurer un bon positionnement à vos contenus web</h5>
<h5>et séduire les internautes. </h5>
</div>
<div class="col6moz">
<div class="col6 bkg-jaune margin-right expertise5">
<p>Formée aux principes du référencement naturel, je propose des contenus optimisés SEO qui vous permettent d’<strong>améliorer votre positionnement dans les SERP</strong> (pages de résultats des moteurs de recherche).</p>
<p>Un contenu bien organisé avec une densité de mot clé bien dosée, des liens stratégiques...<strong>fait réellement la différence !</strong></p>
</div>
<div class="col6 bkg-jaune margin-left expertise6">
<p> Mes connaissances en <strong>HTML5</strong> me permettent d’intervenir directement sur les <strong>CMS</strong> (WordPress, Joomla et Drupal….) et de vous livrer des textes en format HTML si vous le souhaitez.</p>
<p>J’utilise également des <strong>outils d'édition</strong> comme Storify, Infogr.am, Batchgeo, Timeline...</p>
</div>
</div>
</section>
<section class="row-fluid single_post" id="">
<div id="text-align" class="margin-bottom">
</div>
</section>
<?php endwhile; endif; ?>
<!-- end POST -->
<?php
$pcv_link_pages_args = array(
'before' => '<div class="pagenavigation">',
'after' => '</div>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'next',
'nextpagelink' => __( 'Next page', 'perfectcv' ),
'previouspagelink' => __( 'Previous page', 'perfectcv' ),
'pagelink' => '%',
'echo' => 1
);
wp_link_pages( $pcv_link_pages_args );
?>
</div>
<!-- /page -->
<?php get_footer(); ?>
Le CSS
.col4 {
width: 31.8%;
float: left;
margin-top: 20px
}
.expertise1 {
padding-top: 10px;
height: 161px;
}
.expertise2 {
padding-top: 10px;
height: 161px;
}
.expertise3 {
padding-top: 10px;
height: 161px;
}
.expertise5 {
height:133px;
}
.expertise6 {
margin-bottom: 20px;
}
p {
font: 1.4em 'Titillium Web', sans-serif; /* 14px/10 */
color: #464646;
margin-bottom: 14px;
}
.margin {
margin-right: 2em;
margin-left: 2em;
}
Sur l'examinateur d'élément quand je passe la font de p en px au lieu de em le CSS est lu par i.e, idem pour les margin et du coup les 3 colonnes flottent bien les unes à côtés des autres.
Si ça peut aider, le site est visible ici
http://victoire-de-charette-redaction-web.com/
Merci !
