Bonjour à tous,
J'ai un petit problème de taille de conteneur. J'ai deux éléments (<article> et <aside>) contenus dans une div. Mon article est à gauche, la sidebar à droite, et la div générale a un fond de couleur. Le problème est qu'il arrive, quand mon aside est trop long, que le contenu déborde du fond blanc de ma div, qui prend automatiquement la taille de mon <article>. Comment faire pour m'assurer que la div générale s'étale suffisament pour faire entrer ses deux contenus ?
Voici le détail du code.
La sidebar est au format <aside> <ul> et <li>. Classique.
Et voici le CSS, que vous allez sans doute trouver un peu bordélique
.
Vais-je me faire fustiger pour ne pas utiliser les flottants ? J'ai essayé plusieurs combinaisons de float et margin, et je n'arrive pas à régler le problème. D'autant que je ne sais pas à l'avance lequel de mon <article> ou de mon <aside> sera le plus long... Je veux juste que #content prenne la taille qu'il faut !
Merci d'avance de votre aide.
Tan
J'ai un petit problème de taille de conteneur. J'ai deux éléments (<article> et <aside>) contenus dans une div. Mon article est à gauche, la sidebar à droite, et la div générale a un fond de couleur. Le problème est qu'il arrive, quand mon aside est trop long, que le contenu déborde du fond blanc de ma div, qui prend automatiquement la taille de mon <article>. Comment faire pour m'assurer que la div générale s'étale suffisament pour faire entrer ses deux contenus ?
Voici le détail du code.
<div id="content">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div class="post_content">
<?php the_content(); ?>
</div>
</article>
<?php get_sidebar(); ?>La sidebar est au format <aside> <ul> et <li>. Classique.
Et voici le CSS, que vous allez sans doute trouver un peu bordélique
.#content {
border-radius: 5px;
clear: both;
width: 80%;
margin: 20px auto;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
}
aside {
display: inline-block;
margin-bottom: 50px;
margin-left: 2%;
position: absolute;
}
article {
display: inline-block;
width: 65%;
border-right: 1px solid #b8a5b8;
padding-right: 10px;
}Vais-je me faire fustiger pour ne pas utiliser les flottants ? J'ai essayé plusieurs combinaisons de float et margin, et je n'arrive pas à régler le problème. D'autant que je ne sais pas à l'avance lequel de mon <article> ou de mon <aside> sera le plus long... Je veux juste que #content prenne la taille qu'il faut !
Merci d'avance de votre aide.
Tan
