Comment centrer des blocs flottants côte à côte?

Bonjour à tous,
Je cherche à faire quelque chose de sans doute assez simple mais je n'y arrive pas comme je le voudrais.

Pour résumer j'ai deux colonnes dans deux blocs différents, une pour le contenu principal en float:left, et un autre bloc sur le coté en float:right pour le login, les liens etc.

J'aimerais pouvoir donner une dimension à ces deux colonnes et qu'elles restent centrées sur ma page côte à côte. La seule solution trouvée pour le moment est de mettre ces deux blocs dans un <div> qui les englobe avec une class="center" qui a un width et margin:auto comme propriété.
Ça marche... mais ça me semble pas très correcte de rajouter des div pour agencer la mise en page. Est-ce que je me trompe? Comment alors centrer mes éléments en me contentant des classes déjà existantes pour les deux blocs flottants?

Merci d'avance!
Modifié par untitledoc (27 Mar 2012 - 01:33)

Salut,

Un petit lien ou du code serait plus parlant.
A priori, il te faut des éléments de type block pour pouvoir attribuer une dimension, c'est pour cela que cela marche avec les div.

Peut-être avec un display:block; sur les éléments en question.

Salut

A première vue, ta méthode est correcte. Ce principe est beaucoup utilisé.

Salut !

untitledoc a écrit :
ça me semble pas très correcte de rajouter des div pour agencer la mise en page.

Ca ne me dérange pas non plus du moment que ton div regroupe plusieurs éléments, c'est une bonne utilisation il me semble.
Après tu peu tenter de bosser directement avec le body comme conteneur mais ça sera peut être un peu plus tendu.
Modifié par _laurent (27 Mar 2012 - 09:28)

C'est la méthode que tout le monde utilise,

C'est donc tout à fait normal

Ok merci pour vos message.

Mais je me pose cette question car j'ai toujours lu que la mise en page et l'HTML devait être tout à fait séparé, or ici, la balise <div class="center"></div> ne me sert uniquement à centrer mon contenu.

Je compte également créer par la suite une version du site allégée pour iphone/android, ma balise <div class="center"> sera toujours la mais ne me servira peut-être plus a rien.

Est-ce que je continue quand même comme ça?

Salut,

untitledoc a écrit :
Mais je me pose cette question car j'ai toujours lu que la mise en page et l'HTML devait être tout à fait séparé, or ici, la balise <div class="center"></div> ne me sert uniquement à centrer mon contenu.
Je compte également créer par la suite une version du site allégée pour iphone/android, ma balise &lt;div class=&quot;center&quot;&gt; sera toujours la mais ne me servira peut-être plus a rien.

Si cela t'ennuie tellement d'avoir une div#center qui ne sert qu'à centrer ton contenu, alors renomme-là div#global (comme sur les gabarits d'alsa par exemple), comme ça tu pourras dire qu'il s'agit d'une division ayant pour objet de contenir les éléments de la page puis - éventuellement - de positionner le tout en CSS. Le principe du conteneur global servant à positionner horizontalement son contenu ne pose de problème déontologique particulier… tu fais de l'excès de zèle !

Cela dit, tu pourrais également utiliser body comme conteneur à la place de cette div#center, ça marche aussi, normalement (à tester suivant les contraintes de ton design).

Enfin, pas de souci particulier pour l'adaptation du site en version mobile. Il suffira de supprimer les marges automatiques utilisées pour centrer le conteneur et de passer ton conteneur en largeur auto…
Modifié par audrasjb (27 Mar 2012 - 14:25)

a écrit :
j'ai toujours lu que la mise en page et l'HTML devait être tout à fait séparé

On a bien progressé, mais cela reste un but à atteindre, pas une réalité pratique. Mais les prochains modules css3 devraient permettre à aller encore plus loin à ce niveau.

a écrit :
ne me sert uniquement à centrer mon contenu

Pas vraiment, elle sert à grouper deux éléments ensemble qui ont du sens d'être mis ensemble (ou sinon c'est ton visuel qui est au fraises). Tu choisis d'utiliser cette div pour centrer ton contenu, mais elle peut être utilisée par des scripts, des agrégateurs automatiques etc. J'irais même jusqu'à dire que c'est une bonne chose de faire quelques groupements logiques du genre, même si tu ne les utilise pas.

a écrit :
Je compte également créer par la suite une version du site allégée pour iphone/android, ma balise <div class="center"> sera toujours la mais ne me servira peut-être plus a rien.

Tu as conscience que pour une seule petite icône de 2.5 ko tu peux mettre 100x ta balise avant d'atteindre l'équivalent...

Intéresses-toi à la Loi de Pareto. 10% de ta page est responsable probablement de 80% du poids, et ces 20% ne sont pas la structure html...

Super, merci pour les infos! ça m'aide pas mal pour continuer!