28172 sujets

CSS et mise en forme, CSS3

[Résolu] Eviter un <div style="clear:both"></div>

Bonjour,

J'ai la structure suivante:

<div class="wrap">
    <div id="sidebar">.....</div>
    <div id="contenu">
        ...........
        <div class="prodItem">.........</div>
        <div class="prodItem">.........</div>
        <div class="prodItem">.........</div>
        <div class="prodItem">.........</div>
    </div>
</div>
<footer>Footer</footer>




footer {
	background-image: url(/images/fondDegrade1.jpg);
	background-repeat: repeat-x;
	color: #FFF;
	line-height: 34px;
	margin-top: 20px;
	margin-bottom: 10px;
}
#contenu {
	margin-left:209px;
	text-align: center;
}
#sidebar {
	background-color: yellow;
	float:left;
	margin-right: 22px;
	width:187px;
}
.wrap {
	overflow:hidden;
}
#pagFam .prodItem {
	border: 1px solid;
	box-shadow: 8px 8px 12px #aaa;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	padding-bottom: 10px;
	width: 246px;
}


Les prodItem s'empilent en float:left car je n'en connais pas nombre.
Afin d'éviter le depassement des flottants, le conteneur a un overflow:hidden
Seulement, cet overflow cache l'ombre portée appliquée aux prodItem

La solution de facilité serait de lever l'overflow hidden et de mettre un div avec un clear both juste avant le footer pour placer ce dernier à la suite des prodItem.
Mais ce n'est pas propre à mon gout

Auriez vous une autre piste ?

Merci d'avance
J'ai copié-collé ton code pour analyser le problème. J'obtiens un truc comme ça :
http://www.filiiip.net/pbdiv.jpg

A vrai dire, je ne saisis pas bien où se situe ton problème : ça paraît bien, comme ça, non ? Bon, seule nuance : j'ai viré le #pafFam que tu avais oublié d'enlever dans ton exemple de code, et j'ai rajouté un margin-bottom sur la classe prodItem. Mais je suppose que le problème n'est pas là...

PS : J'avoue que perso, des div clear both, ça ne me traumatise pas plus que ça !
Modifié par petibato (06 Sep 2013 - 23:27)
Ouais : ça vaut le coup de tenter un margin:10px sur .prodItem... Dis-donc, c'est au poil de pixel près ton affaire !
Oui, comme je te disais en MP, grace à ta solution, ça fonctionne mais je perds l'alignement de mon div avec le reste.
Ce n'est plus le bord du div qui est aligné mais son ombre alors que le résultat recherché était d'avoir l'ombre au dela..... en débordant du parent

Merci
Sujet clos
Aller à