Aligner des articles horizontalement sur WordPress

Mon problème est assez simple, comment faut il faire pour pouvoir aligner des articles horizontalement ? J'ai bien tenté d'utiliser des floats mais que nénni...

Voila mon code HTML/PHP:

<div id="titre_cat">
    <h3>Miele<h3>
</div>
        <?php
         query_posts (array ('category__and' => array (12,27), 'order' => 'DESC'));
         if (have_posts('')) :
         while (have_posts()) : the_post();
    ?>
<div id="article">
    <div id="titre_article">       
        <?php the_title(''); ?>
    </div>
    <?php the_content(); ?>
    <?php endwhile; ?>
    <?php endif; ?>
</div>

Et voila mon code CSS:

#titre_cat{
    font-family: Caviar Dreams;
    font-size: 24px;
    width: 710px;
    border-bottom: solid 1px #000;
    padding-top: 40px;
    padding-bottom: 10px;
    margin-left:40px;
    margin-bottom: 20px;
    margin-top:0px;
}

#article{
    font-family: Arial;
    font-size: 14px;
    width: 300px;
    margin-left:20px;
    float:left;
}

#titre_article{
    font-size: 18px;
}

Merci d'avance à ceux qui tenterons de m'aider...

Antoine2011

Bonjour Antoine2011,

antoine2011 a écrit :
J'ai bien tenté d'utiliser des floats mais que nénni...

Ça veut dire quoi «que nenni» ??
Ça n'a pas marché, je suppose mais quel était le rendu ? Qu'est-ce qui ne te plaisait pas ? Quel est le problème ? Sans plus de précision, il est difficile de t'aider. De plus, tu nous donne à lire un bout de code mais sans connaître le reste de la structure HTML de ton thème, c'est pas facile de t'aider.

Là, comme ça, avec ma boule de cristal je te dirais d'englober le bout de code que tu as mis dans un conteneur et de lui appliquer un comportement flottant à lui (ou de passer son affichage en "inline-block").

Tout d'abord merci d'avoir répondu !
Je pensais être assez claire en disant

Antoine2011 a écrit :
Mon problème est assez simple, comment faut il faire pour pouvoir aligner des articles horizontalement

Sinon pour répondre a ta première question "que nenni" veut dire ''rien du tout''...
Pour t'as deuxième question je pensais que c'était évident... si les articles ne s'affichent pas horizontalement c'est qu'ils s'affichent verticalement (comme dans presque tous les WordPress)
Pour le code HTML de la page c'est ce bout de code qui se répète pour chaque catégorie. Il n'y a rien d'autre dans ma page hormis un h1.

Voila un lien vers le site si ça peut t'aider.

http://www.astral-lyon.com/WordPressAstral/?page_id=5
Modifié par antoine2011 (23 Aug 2013 - 10:16)

J'ai pas trop compris ce que tu cherches à faire, si c'est ce que je pense, il faudrait que tu englobes ta div titre + articles et les mettre en float:left par la div que tu as englobé
ex :

<div class="englobe-moi">
   <div class="titre_cat"></div>
   <div class="article"></div>
</div>

.englobe-moi{
   float:left;
}

PS : les #ID ne sont utilisé qu'une fois, sinon tu te sers des .CLASS

antoine2011 a écrit :
Voila un lien vers le site si ça peut t'aider.
http://www.astral-lyon.com/WordPressAstral/?page_id=5

Ah ben voilààà
Je sais ce que veut dire que nenni (sans accent), je voulais juste dire qu'il était impossible de comprendre ton problème si tu reste aussi vague dans sa description.

Sinon, tout t'a déjà été dit
Je vois d'ailleurs que tu as passé ton conteneur .conteneur_article en flottant. Maintenant, tu n'as plus qu'à limiter sa largeur et tes éléments se positionneront comme tu le souhaites.
Je viens de le tester sur ton site, avec une largeur de 300 pixels par exemple, les éléments se positionnent bien les un en dessous des autres.
Modifié par audrasjb (23 Aug 2013 - 11:33)

Bonjour

je ne sais pas si c'est le même problème que moi , mais ça me semble être un peu semblable. J'ai englober d'un div class autour des articles, mais j'aimerais que la boucle while dans wordpress refait un nouveau div class autour de chaque article pour que je puisse les mettre l'un à côté de l'autre et pour l'instant il ne crée qu'un seul div class qui englobe la généralité des articles. Il m'est donc impossible de les positionner en float left.

merci du coup de pouce!

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post();   ?>
                <?php echo"<div class=\"articleaccueil\">"; ?>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail();}?>
                <div class="post_content">
                <div class="contenu"><?php the_content(); ?>...</div><!--fin contenu-->
				<a href="<?php the_permalink(); ?>">Lire plus...</a>
                </div><!--fin articleacceuil-->
                
				<?php endwhile; ?>

Salut Sydgie,

C'est normal, ta div est à l'intérieur de la boucle, si tu veux que seul ton contenu soit en boucle il faut que tu sortes ta div concerné en dehors du <?php while...?> tout ce qui est dedans va être en boucle, ce qui est en extérieur non.
exemple d'un cas précis :
<ul>
<while>
<li></li>
</while>
</ul>

Ici seul les li seront dans la boucle donc apparaitront autant qu'il y en aura.