Bonjour à tous,

Tout d'abord je tiens à vous dire combien je suis content de trouver une telle communauté, et j'espère que vous arriverez à m'aider sans que cela soit trop pénible.
Si je fais une erreur dans le protocole d'inscription ou de description de mon problème dites le moi je rectifierai avec plaisir.

J'ai commencé un petit site web avec un cms "Indexhibit". Très simple et pratique, j'ai personnalisé mon fichier CSS, et pour mettre en page j'utilise le HTML dans ma partie admin/traitement de texte.

Voilà mon problème, je souhaite créer deux colonnes de texte pour chaque catégorie (titre en rouge) suivi de leurs images respectives.

COMME CECI

Pour cela, je crée deux div, la première pour la colonne de gauche :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div style="width:400px; float:left; text-align:justify; padding:10px;">
Et lorsque je veux créer ma colonne de droite je ferme cette div et en ouvre une autre avec ce code:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div style="width:400px;height:650px; float:left; text-align:justify; padding:10px;">
Je fais varier la hauteur de la div de droite pour éviter que la div du dessous ne remonte dans celle du dessus. Au début tout fonctionnait correctement, mais j'ai eu ensuite des problèmes avec les images, et le texte, le texte bouge mais les images ne suivent pas donc ce chevauchent...
J'ai essayé de les insérées dans des div mais ça n'a rien changé.
Les images sont dotées de balise de lien hypertexte car j'utilise Lytebox.

Pour mieux vous rendre compte voici l'URL de la page

Je vous met à la suite mon fichier css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/**
* CSS
* 
* @version 1.0
* @author Vaska 
* @author Gregory Cadar
*/
* {
	margin: 0;
	padding: 0;
}
 
body {
	font-size: 18px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-decoration:none; color: #a1a1a1;
	background-image:url(http://www.steiner-lebeausoleil.org/FR/d.jpg);
background-repeat: no-repeat;
background-position: bottom right;
background-color: #FFF;
}
 
body.section-1 { }
body.section-2 { }
body.section-3 { }
 
a:link { text-decoration: none; color:#a1a1a1; }
a:active { text-decoration: none; color: #e67c1d; }
a:visited { text-decoration: none; color:#a1a1a1; }
a:hover { text-decoration: none; color: #e67c1d; }
 
a img { border: none; }
 
#menu {
    width: 300px;
    overflow: auto;
    top: 0;
    bottom: 0;
	left: 0;
    position: fixed;
    height: 100%;
}
 
#menu ul {
	list-style: none;
	margin: 30px 0 70px 50px;
	text-decoration: none; color: #e67c1d;
	font-size: 20px;
 
}
 
#menu ul li.section-title { }
 
#content {
    height: 100%;
    margin: 50px 0 0 400px; /** marge gauche*/
    top: 0;
}
 
.container {
    padding: 5px 5px 25px 5px;
}
 
#content p { width: 100%; margin-bottom: 9px; }
 
p {
    margin: 0 0 9px 0;
}
 
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }
h5 { color:#F00;
     font-size:18px;}
 
#img-container	{ margin: 0; padding: 0; }
#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }
 
#once { clear: left; }
Et le code de ma page index.php :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
 
<title><%title%> : <%obj_name%></title>
 
<script LANGUAGE="JavaScript">
function display(calque)
{
document.getElementById(calque).style.display=document.getElementById(calque).style.display=="none"?"block":"none";
}
</SCRIPT>
 
 
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    handleOversize: "drag",
    modal: true
});
</script>
 
 
 
<link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/style.css' type='text/css' />
<!--[if lte IE 6]>
<link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/ie.css' type='text/css' />
<![endif]-->
<plug:front_lib_css />
<plug:front_dyn_css />
<script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
<script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
<script type="text/javascript" language="javascript" src="/lytebox.js"></script>
<link rel="stylesheet" href="/lytebox.css" type="text/css" media="screen" />
<plug:front_lib_js />
<script type='text/javascript'>
path = '<%baseurl%>/files/gimgs/';
 
$(document).ready(function() {
setTimeout('move_up()', 1);
}); 
</script>
<plug:front_dyn_js />
<plug:backgrounder color='<%color%>', img='<%bgimg%>', tile='<%tiling%>' />
</head>
 
<body class='section-<%section_id%>'>
<div id='menu'>
<div class='container'>
 
<%obj_itop%>
<plug:front_index />
<%obj_ibot%>
 
 
</div>	
</div>	
 
<div id='content'>
<div class='container'>
 
<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->
 
</div>
</div>
 
</body>
</html>
J'ai tenté de séparer les images du texte par une balise P ou BR mais rien ne se passe, auriez-vous une idée, ou du code plus propre?
Je suis désolé je suis débutant et avance à tâtons, la solution doit être très simple, mais le problème est trop particulier, je n'ai pas réussi a trouver une solution dans l'aide ou dans des messages déjà existant, si vous en trouvez un, donnez moi le lien, je le lirai de suite je ne suis pas faignant =)

Merci à vous!