28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire cohabiter <article> et <aside> dans une mêm

Bonjour à tous,

Je m'écharpe avec moi-même en ce moment sur un problème de mise en page qui, je pense (j'espère) est pourtant tout con... Voilà le topo :

Je travaille sur la création d'un thème Wordpress. La structure de ma page est la suivante :


<body><div id="tout">
   <header></header>
   <main>
      <div id="content">
         <article></article>
         <aside>
	   <ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#">Lien 2</a></li>
	   </ul>
         </aside>
      </div></main> /* Fermeture de la div "content" */
   </div></body> /* Fermeture de la div "tout" */


Et le CSS ressemble à ça :

#content {
	border-radius: 5px;
	clear: both;
	width: 80%;
	margin: 20px auto;
	padding: 20px;
	background: rgba(255, 255, 255, 0.8);
}

body {
	background-image: url('img/bg.jpg');
	background-attachment: fixed;
	font-family: nordicathin;
}

#tout {
	width: 1280px;
	margin: 0 auto;
}

aside {
	padding-bottom: 20px;
	width: 30%;
	float: right;
}

article {
	float: left;
        width: 65%
}


Je souhaite donc qu'au sein de ma page (après le header) s'affiche un cadre blanc qui contiendrait, à gauche (65%) l'article et à droite (30%) la sidebar (les 5% restants étant une marge). Le problème, c'est que je n'arrive pas à faire cohabiter les deux sur un même niveau. La sidebar, si elle s'affiche bien à droite, passe toujours en-dessous de l'article (effet escalier), et surtout en dehors du cadre défini par le #content (un cadre blanc légèrement transparent).

Et encore, ça c'est quand je ne mets pas le "float: left;" à article. Parce que quand je rajoute cette ligne, c'est encore pire : mon cadre blanc s'affiche en haut mais sur à peine 30px de hauteur et n'englobe même pas le contenu de l'article, qui s'étale directement sur le fond d'écran.

Est-ce que c'est mon code qui commence à devenir trop brouillon et indéchiffrable même pour le navigateur ? Ou est-ce que j'ai foiré quelque chose dans le CSS ?

Merci d'avance si vous avez le temps de jeter un de vos yeux experts...
Non, je pense que tu ne maîtrises pas suffisamment les positionnements flotttants, c’est tout. Tout ce que tu décris est le comportement normal.

Avec le float: left; pour que ton cadre blanc englobe tout tu dois lui ajouter un overflow hidden, par exemple. Pour ce genre de détail, je t’invite à parcourir la section « Apprendre » sur Alsascréations, tu trouveras de nombreuses ressources sur les flottants.

Concernant ce que tu décris en revanche, je ne pense pas que float soit la meilleure solution, tu pourrais te tourner vers display: table-cell qui serait probablement plus simple à manier.

Et simple remarque mais je suis à peu près sûr que tes deux div ne servent à rien... Pourquoi ne pas styler body et main, plutôt ?
Ok merci pour ta réponse. Effectivement, j'ai suivi un tutoriel de création de thèmes qui utilisait les flottants mais dans un cadre légèrement différent. J'ai bêtement cru pouvoir l'appliquer dans plein d'autres circonstances... Retour à la case école, donc. Ca tombe bien, ce site me paraît tout indiqué !

Pour ce qui est des div qui paraissent inutiles, c'est parce que mon code est un peu plus complet que ça. J'ai par exemple un footer qui n'a pas les mêmes styles que #tout, etc. Mais je pourrai sûrement effectivement faire un petit coup de nettoyage pour optimiser tout ça.

Bon, je mettrai en résolu quand j'aurai trouvé la bonne façon de faire.

Merci !
Ok, donc j'étais loin du compte, effectivement. La solution que j'ai trouvée, finalement, est de mettre mon bloc article et mon bloc aside en 

display: inline-block;


Mon aside (dont je sais qu'il sera toujours le plus court) en

position: absolute;
right: 30%;


Et mon article en

width: 65%


Ca marche bien de cette façon. Et ça fait du bien de se replonger dans les tutoriaux, ça rafraîchit. Je me pencherai sur les "display: table" un peu plus tard, ça a l'air efficace comme outil.
Sujet clos
Aller à