Problème 3bloques, alignement

Salut à tous, c'est encore moi ,

j'ai un autre petit problème, alors ça va pas être très facile à expliquer ^^ mais la solution est surement simple pour vous...

je vous ai fait un petit schéma:
http://tamkio.free.fr/schema3div.png

je voudrais avoir ce résultat, mais je ne sais pas si il faut utiliser des "div" ou des "class" pour enfaite avoir les bloques 1 et 2 alignés...
actuellement voici se que j'ai:
http://tamkio.free.fr/actuelle-screen.png

je vous épargne tous le texte ^^

<div id="img"></div>
<div id="lorem"></div>
</div id="news"></div>

bon avec ce bout de code je ne vous apprend rien...
et donc je voulais savoir comment faire pour avoir le bloque 1 et 2 alignés et non l'un en dessous de l'autres
bien sur il faut que ces bloques soit dimensionné par css, c'est pour ça que je suis dans cette rubrique ^^

(précision: c'est 3 bloques se trouvent dans une div principale)

voilà merci de votre aide
Modifié par oosmatouki (25 Jun 2008 - 19:05)

Salut oosmatouki ,

la question "faut-il utiliser des div ou des class ?" témoigne d'une belle confusion !

une <div> est une balise de type bloc (et pas bloque ) alors qu'une class, au même titre qu'un id est un attribut que l'on peut affecter à un élément (comme une div par exemple) afin de pouvoir le cibler (css, javascript...).

Relire les tutos Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne et Quelle est la différence entre une classe et un id ?

Pour ce que tu veux faire, je verrais bien un premier bloc avec ton image en float:left; et le reste du texte qui se place autour et un deuxième bloc (venant se placer naturellement en dessous) contenant les news. Relire également Comment positionner les éléments en CSS ? et tant qu'à faire comment débuter et trouver l'information ?

A+

salut,
enfaite je connais le float mais je ne trouve pas ça terrible comme technique, existe il une autre solution ?

oosmatouki a écrit :
enfaite je connais le float mais je ne trouve pas ça terrible comme technique

A priori toute les techniques de positionnement sont utiles et la question n'est pas tant de les trouver terribles que de choisir celles qui nous permettent de faire la mise en page que l'on souhaite obtenir le plus simplement possible .

En l'occurrence tu peux effectivement utiliser d'autres techniques. Le mieux est de faire des essais et de venir reposer une question en cas de soucis.

A+

oosmatouki a écrit :
enfaite je connais le float mais je ne trouve pas ça terrible comme technique, existe il une autre solution ?

display: table-cell, non supporté par IE 6 et 7.

bon bas je vais rester sur le float, mais comment font la plus part des sites alors il me semble pas qu'ils utilisent que le float

on en a un très bon exemple ici: tomsguide

mais sinon merci quand même de m'avoir répondu

oosmatouki a écrit :
bon bas je vais rester sur le float, mais comment font la plus part des sites alors il me semble pas qu'ils utilisent que le float

Non, ils n'utilisent pas que le float. Comme je te disais, tu peux lire le tuto sur la manière de positionner les éléments en CSS et essayer d'autres solutions.

Sinon pour le site dont tu donnes le lien, je t'invite à utiliser l'extension Firebug pour Firefox et à inspecter la page : il se trouve que le float est très largement utilisé !

okay je vais regarder ça, je ne sais pas comment il a été fait donc c'est pour ça que je me pose des questions

oosmatouki a écrit :
on en a un très bon exemple ici: tomsguide

Un très bon exemple d'utilisation intensive de la propriété float, effectivement. Il y a plus d'une centaine d'éléments flottants pour la page d'accueil.

et sinon y a quoi d'autre comme solution ?