Probleme de style CSS 'float' sur div

Fermé

kalamity666 Messages postés 4 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 23 décembre 2008 - 23 déc. 2008 à 00:52
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 - 23 déc. 2008 à 01:01

Bonjour,

Je planche depuis quelques heures sur un problème qui je suis sûr à une solution simple.
J'essaie d'obtenir, en simple HTML, un pseudo-tableau en imbriquant des tags DIV.
(je ne veux pas utiliser les balises TABLE)

Mon code comprend une div "root", puis 2 divs enfants de la première, chacune de ses 2 DIV comportant aussi 2 DIV où je fais apparaître des informations.

Je voudrais que mes 2 DIV (enfants de 'root') soit l'une à coté de l'autre, d'où l'utilisation du style 'float'.

Notez qu'il n'y a pas d'autre styles CSS appliqué à ce code, les attributs 'ID' étant là pour la compréhension du code.

Voici mon code :

<div id="root" style="width:350px; top:100px; left:100px; border:1px solid; position:relative;">
<div id="left" style="width:100px; height:20px; ";>
<div id="desc_left">Desc left</div>
<div id="list1">ligne<br>ligne<br></div>
</div>
<div id="right" style="float:right;">
<div id="desc_right">Desc right</div>
<div id="list2">ligne<br>lignsse<br></div>
</div>
</div>

J'obtiens, avec ce code, mon DIV d'id 'right' en dessous, à gauche, de la DIV d'id 'left'.

Je note aussi que la bordure du DIV 'root' n'entoure pas complètement les DIV pourtant imbriquées.

Auriez vous une idée ?

Merci beaucoup !

A voir également:

Probleme de style CSS 'float' sur div
Style word - Guide
Nom pour facebook stylé - Guide
Div c++ - Télécharger - Langages
Style d'écriture a copier coller - Guide
Pseudo instagram stylé fille - Guide

1 réponse

Réponse 1 / 1

scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
23 déc. 2008 à 01:01

Bonsoir, voici une ébauche d'un tableau fait de divs avec trois colonnes.

Cependant je te conseille vraiment si tu dois faire un tableau d'utilise table (il n'est pas la pour rien), et je vois pas pourquoi tu ne pourrais pas l'utiliser.

Chaque chose à son rôle, et celui d'un div n'est pas vraiment de faire des tableaux, tandis qu'un table c'est le siens ^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tableau de DIVs</title>
<style>
div {
	border: 1px solid red;
}
</style>
</head>
<body>
<div style="width: 606px;">
  <div style="width: 200px; float: right;">droite</div>
  <div style="width: 200px; float: right;">centre</div>
  <div style="width: 200px;">gauche</div>
  <div style="clear: both;"></div>
  <div style="width: 200px; float: right;">droite</div>
  <div style="width: 200px; float: right;">centre</div>
  <div style="width: 200px;">gauche</div>
  <div style="clear: both;"></div>
  <div style="width: 200px; float: right;">droite</div>
  <div style="width: 200px; float: right;">centre</div>
  <div style="width: 200px;">gauche</div>
  <div style="clear: both;"></div>
  <div style="width: 200px; float: right;">droite</div>
  <div style="width: 200px; float: right;">centre</div>
  <div style="width: 200px;">gauche</div>
  <div style="clear: both;"></div>
</div>
</body>
</html>

Voilà bonne chance.

Discussions similaires

Problème de table des matières

sos je cherche un nom pour mon facebook

trait horizontal avec du css