[RESOLU] Bloc résponsive, petit problème avec le float

Salut les gars,

J'ai un soucis avec mes colonnes responsives. Le problème n'est pas lié au faite qu'elles soient responsive mais bien par rapport au float.

Je souhaiterais avoir deux colonnes de deux blocs par ligne, mais avec le float, je n'arrive pas à avoir ce rendu .. l'utilisation de inline-block n'est pas une éventualité par rapport au responsive ^^

C'est plutôt compliquer d'expliquer comme ça, mais le rendu que je vous parle est comparable à celui-ci : http://awesomescreenshot.com/0e322g1901

Et je résultat que je cherche est celui-ci (toujours deux colonnes de deux bloc par ligne, quelque soit le contenu : http://awesomescreenshot.com/09622g1sc6

Je sais que je peux mettre en CSS un nth-child(2n+1) avec un clear:both, mais cela ne serai pas compatible IE8, ce que je souhaite éviter.

Je suis en panne d'idée, pouvez-vous m'envoyer sur une piste ?

Merci à vous
Modifié par ILeG3nDz (10 Dec 2013 - 09:58)

Bonjour,

c'est très bien d'avoir mis des captures d'écran présentant ton problème mais pourrais-tu quand même insérer tes codes ici ?

Salut,

Mille excuses, j'avais fait ça très rapidement, j'ai complètement oublié de fournir le code

Le voici :

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi architecto veritatis obcaecati aliquid quam corporis asperiores molestiae pariatur aspernatur maiores rerum sit minus adipisci ipsam sed corrupti perferendis itaque excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi architecto veritatis obcaecati aliquid quam corporis asperiores molestiae pariatur aspernatur maiores rerum sit minus adipisci ipsam sed corrupti perferendis itaque excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi architecto veritatis obcaecati aliquid quam corporis asperiores molestiae pariatur aspernatur maiores rerum sit minus adipisci ipsam sed corrupti perferendis itaque excepturi.</div>
<div>Officia praesentium voluptas libero magni officiis! Nesciunt unde error hic debitis aspernatur rerum ipsam cumque consectetur a labore molestiae eveniet fugiat et dolores delectus minima quia odit id ipsa atque.</div>
<div>Corrupti officia veniam architecto accusantium nemo inventore labore doloribus ea rem nostrum laborum placeat impedit voluptate natus magni reprehenderit dignissimos eaque sed quod odit incidunt a necessitatibus ullam culpa doloremque.</div>
<div>Eligendi labore iste perferendis consequatur unde maiores praesentium adipisci recusandae laborum nesciunt repudiandae asperiores ut cupiditate quibusdam ex obcaecati quo neque deleniti dolorem numquam quod soluta dicta nam. Atque excepturi!</div>

div {
    float: left;
    width: 50%;
}

Et pour me faire pardonner, voici le fiddle : http://jsfiddle.net/FR4AR/

Merci à toi !
Modifié par ILeG3nDz (09 Dec 2013 - 15:34)

ILeG3nDz a écrit :
Je souhaiterais avoir deux colonnes de deux blocs par ligne, mais avec le float, je n'arrive pas à avoir ce rendu .. l'utilisation de inline-block n'est pas une éventualité par rapport au responsive ^^

Pourtant, c'est bien la solution et je ne vois pas le problème avec le responsive?

Sinon nth-child, ou ajout de div/hr pour rester en float…

kustolovic a écrit :
Pourtant, c'est bien la solution et je ne vois pas le problème avec le responsive?

Car en inline-block, ils ne prennent pas toute la largeur disponible comme en float.

ILeG3nDz a écrit :


Car en inline-block, ils ne prennent pas toute la largeur disponible comme en float.

Il ne prennent pas toute la largeur disponible ni en float, ni en inline-block. Par contre avec width: 50% ils prendront les deux 50%.