Alignement texte apres utilisation float

Bonsoir,

J'ai un debut de design qui a un bug que j'ai deja rencontrer mais je me rappelle plus comment passer outre. Je vais pas decrire le probleme longuement, juste montrer le design :

http://dib258.ironie.org/design/index.html

Donc le probleme est que par exemple j'ai ecrit dans la colonne de gauche, celle du menu, et quand j'ecris dans celle de droite le texte se met en dessous de ce que j'ai ecrit dans la colonne de gauche, alors que les 2 texte devraient etre l'un a cote de l'autre.

Je pense que le probleme vient du fait que j'utilise un float: left, et un margin-left pour mettre les 2 divs cotes a cotes.

Si vous pouviez me dire que dois je rajouter dans mon css pour reparer ceci ?

Merci d'avance

Ps : pardon pour les accents j'ecris sur un clavier QWERTY

Salut,

Il y a plusieurs problèmes :

- Ton texte est "laché dans la nature", cad perdu entre deux divs. Il est après #page, sachant que #page est composé de deux div qui ont une hateur fixe. Il est logique que ton texte se retrouve en dessous. Pourquoi mettre des divs partout si ce n'est pas pour les utiliser ?

- le nombre de div qui est bien trop important, réduit le au maximum. Dans ton cas tu peux te contenter d'un div principal (cad #conteneur ou #border, les deux font exactement la même chose, avec le truc bizarre gris en background) et de rajouter un div flottant à gauche. Voila, deux divs et ton arrives à la même chose.

Mmmh je pense que la on parle de facon de coder, merci de m'avoir fait remarquer, j'avias mit une div (border) en trop qui etait totalement "useless". Je l'ai retiree immediatement.

Mais le nombre ici de div dans mon code ont une bonne raison, c'est pour permettre a mon design de bien se mettre sans pour autant utiliser de position : absolute;

Par contre les 2 texte " lache dans la nature" : c'etait juste pour un test, regarde je viens de les mettre entre 2 balises p, le texte n'est dans un enclos mtn. Et mon bug existe toujours. Je sais que j'ai deja eu ce cas auparavant et j'avais reussi a le contourner mais la je seche.

(Un peu comme le margin:auto; mit sur div(conteneur) pour que celle si se mette au centre grace au text-align : center; qui se trouve dans le body )

Edit : oh mon dieu je viens de trouver comment pallier ce probleme : juste ajouter dans ma div de droite : overflow:hidden; et hops mon probleme disparait.

Je ne sais pas si c'est le moyen le plus joli pour ca mais ca marche !
Modifié par Dib258 (18 Jan 2010 - 19:35)

Il ne faut pas confondre margin-auto, qui est utilisée pour ce à quoi elle sert, et un workaround sur un code complètement alambiqué qui te pose des problèmes au bout de dix minutes..

Ton problème c'est que #bord-c et #bord-d font tous les deux 93px de haut, mais que #bord-d n'étant pas en float il repart à la ligne, ce qui fait que tu as 2x93px avant ton p.

Je maintiens que ce code est très loin d'être bon et que tu devrais passer du temps à le repenser plutôt qu'à contourner un bug qu'il a engendré !

Explique le comportement que tu veux donner au design si tu veux un peu d'aide.

Je ne comprend pas pourquoi mon #bord-d retournerai a la ligne du fait qu'il ne soit pas en float ? tu veux dire que pour avoir un float correct je devrais mettre les 2 div concernee en float : left; ?

parce que deja j'ai mit une div clear : left en dessous pour arreter le float.


Regarde en gros a quoi doit ressembler mon design : http://dib258.ironie.org/design/index.html

J'ai aucune probleme pour faire un design correctement habituellement.
Mais la le probleme qui se pose est que que la barre special dans la div #page deborde a droite et a gauche sur la div #menu. Donc deja rien que pour mettre cela en page cela me prend quelque div en plus. Regarde mon code et dit mwa ce que tu ferai pour changer de plus "valide".

Merci d'avance en tout cas!