Deux colonnes dans une colonne ?

Bonjour à toutes et à tous !

Je suis un pti nouveau sur votre forum. Cédric, 35 ans, étudiant en graphisme (en Suisse). N'étant pas un pro du codage html, et après avoir longuement cherché dans les livres et sur le net, je tombe ici, mais ne trouve pas vraiment de réponse à ma question au sujet des colonnes.

Je suis en train de réaliser un site qui comprend deux colonnes (une pour la navigation qui restera identique sur chaque page et une pour la partie principale dont le contenu variera selon la page).

Pour la colonne navigation, rien de particulier. Par contre, pour la colonne principale, j'aimerai pouvoir, au besoin, la diviser en deux parties: une partie texte sur la gauche, puis une image en référence sur la droite. Ce serait une sorte de blog avec des news. La question est donc de savoir si je dois diviser cette colonne principale en deux parties (et comment je gère cela en css3), ou s'il y a une manière plus simple de définir une taille fixe (hauteur et largeur) pour la partie texte (à gauche) et l'image sur la droite.

Pour le moment, j'ai tenté de gérer cela avec diverses colonnes mais le souci est l'alignement vertical, il y a un décalage (la partie image vient se caler sous la partie texte, voire photo)


Pour le code ça donne:

<div id="col2">
<img src="img/bandeau.jpg" height="200px" align="right">
</div>
<div id="col3">
<hr class="1px" width="100%" color="black">

<h3>Last Minute</h3>
<h5>2013/09/31 22h00</h5>
<br>
<h4>30 % de réduction pour Halloween !</h4>
<br><br>
<h2>Réservez aujourd'hui et profitez de 30% de réduction sur un séjour du 30 octobre au 2 novembre. 
</div>

<div id="col4">
<hr class="1px" width="100%" color="black">
<img src="img/halloween.jpeg" width="200px"> 
</div>
</div>

Et pour la feuille de style:

div#col2 {
    width: 682px;
    overflow: hidden;
    border: none;
}

div#col3 {
    width: 467px;
    overflow: hidden;
    margin-top: 15px;
   	border: none;

}

div#col4 {
    width: 200px;
    float: right;
    overflow: hidden;
    margin-top: 15px;
   	border: none;

Si vous avez un conseil à me donner, je suis preneur.

Merci d'avance

p.s. Désolé d'avance pour le pavé

Je peux te proposer une solution, et elle se trouve sur le site. C'est un tutoriel CSS récent.

Titre : Un design fluide avec trois «colonnes», grâce au positionnement flottant
Lien : trois colonnes float

Ca va t'aider fortement.

Je te remercie pour ta réponse. Ce n'est hélas pas ce que j'aimerais faire. L'idée de la colonne principale est de pouvoir y déposer des posts liés à une image en référence.

Je vais essayer d'être plus précis dans ma demande. Imaginons que j'ai ceci:



La nav, logo etc dans une colonne, puis la partie principale dans une autre colonne. Mon souhait est de pouvoir gérer les éléments de la colonne principale comme si elle était indépendante du reste du document. Ainsi, je peux créer une zone texte et une zone image. C'est comme si, dans la colonne (image bandeau comprise) principale, je la divisais en 2 colonnes.

Ici j'ai: col1: nav. col2: image bandeau +hr. col3: textes "news". col4: image.
Ce que j'aimerais savoir, c'est s'il est possible de faire en sorte que la col3 et la col4, soient des subdivisions de la col2. Comme tu le vois sur la photo, c'est exactement de cette manière que je veux "ranger les éléments". Là j'ai du bricoler avec des margin-top: -150px;... pour que la hauteur de l'image contenue dans la col4 corresponde à la hauteur de la col3... Bref, c'est du bricolage et j'aime pas bricoler.

Salut,

Tes images ont une hauteur variable ou pas ?

Dans tous les cas, tu peux utiliser la propriété display: table. Elle est supportée sur tous les navigateurs et IE à partir de la version 8 (sachant qu'IE6-7 c'est plus vraiment d'actualité, utilisé par environ 1% des gens selon w3c). Il y a possibilité de l'emuler sur les versions inférieures aussi si jamais.

Exemple d'explication sur la propriété (première page) : http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Tes col3 et col4 seront en display: table-cell et ça résout le problème de l'égalité des hauteurs de tes deux colonnes. En fait, la colonne qui sera la plus petite sera agrandie (en hauteur) automatiquement pour qu'elle soit égale à la plus grande des colonnes.
Modifié par kinkaz (21 Jul 2013 - 19:35)