Pour aligner horizontalement deux éléments de bloc sans recourir aux bidouilles du codage à l'ancienne, il y a display: inline-block, qui marche sous Opera, Safari, Firefox 3 et Internet Explorer 8. Sous Firefox 2, il y a la valeur propriétaire display: -moz-inline-block. Sous Internet Explorer 6 et 7, display: inline-block est essentiellement utilisée pour avoir du [url=http://www.test.blog-and-blues.org/haslayout/trad_temp.html]hasLayout[/url], mais n'a pas d'effet sur les éléments de bloc ; dans ce cas, on recourt au positionnement flottant (ce qui est un exercice assez périlleux, surtout pour les blocs qui suivent des blocs flottants).

Autrement dit :

[b]code HTML[/b]
[code]<div id="global">
<div id="sidebar">
<!-- Le contenu du div -->
</div>
<div id="main">
<!-- Le contenu du div -->
</div>
</div>[/code]
[b]CSS principale[/b]
[code]#sidebar, #main {
display: -moz-inline-block; /* Pour Firefox 2 */
display: inline-block;
}
#sidebar {
width: 15%;
}
#main {
width: 85%;
}[/code]
[b]CSS ciblant IE 6 et 7 (appelée via un commentaire conditionnel <!--[if lte IE 7]>)[/b]
[code]#sidebar, #main {
float: left; /* Positionnement flottant */
}
/* Pour éviter trop de risques avec le positionnement flottant,
on fournit un contexte de formatage
au bloc qui contient nos deux blocs flottants */
#global {
overflow: hidden;
}[/code]
[b]CSS ciblant IE 6 (appelée via un commentaire conditionnel <!--[if lte IE 6]>)[/b]
[code]/* Pour IE 6, il faut donner du layout au bloc conteneur
pour que le contexte de formatage soit bien compris */
#global {
height: 1%;
}[/code]

Vu que tes 2 blocs sont des DIV en position "relative", pourquoi ne pas les placer dans un tableau de 2 colonnes, ainsi la mise en page sera gardée quelque soit le navigateur.

[code]<div id="content">

{* Start Sidebar *}
<div id="sidebar" class="hascontent">
<table border="0"><tr>
<td width="50%"><div id="blocmenu1">{global_content name='blocmenu1'}</div></td>
<td width="50%"><div id="blocmenu2">{global_content name='blocmenu2'}</div></td>
</tr></table>
</div>
{* End Sidebar *}

<img id="imcs" src="uploads/images/imagecut.jpg"></img>

{* Start Content Area *}
<div id="main">


{content} <br />


</div>[/code]

Pourrais t-on avoir le CSS de div#content

D'un autre côté, on n'a pas l'erreur ...

Bonjour, pas fortiche en css voici des heures que je butte sur le problème suivant, j'ai dans le
design de ma templates deux blocs qui sont censé être aligner horizontalement.
Dans firefox le code ci-dessous marche, mais pas dans IE6 qui m'affiche le deuxieme bloc en dessous
du premier....

[code]div#main {
padding-top:35px;
margin-left: 24%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
margin-right: 25%; /* and some air on the right */
}

div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 24%; /* sidebar width, if you change this please also change #main margins */
display: inline; /* FIX ie doublemargin bug */
margin-left: 0;

}


div#sidebar.hascontent {
padding: 0 0%;
width: 15%; /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}
[/code]

et voici la partie xhtml (template du cms madeSimple)

[code]<div id="content">

{* Start Sidebar *}
<div id="sidebar" class="hascontent">
<div id="blocmenu1">{global_content name='blocmenu1'}</div>
<div id="blocmenu2">{global_content name='blocmenu2'}</div>
</div>
{* End Sidebar *}

<img id="imcs" src="uploads/images/imagecut.jpg"></img>

{* Start Content Area *}
<div id="main">


{content} <br />


</div>[/code]

Et pas moyen que je comprenne comment faire en sorte qu'ils soient enfin affiché correctement
sous IE6, quelqu'un pourrait-il me conseiller ?

[i][color=darkred][Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur][/color][/i]