Problème Alignement à droite

Résolu
1234 -  
 1234 -
Bonjour,

Sur mon site, j'ai une partie "colonne droite", qui me permet d'afficher des informations (tableaux ou autres) à droite. Mais je rencontre un problème que je n'arrive pas à résoudre: la partie colonne droite n'est pas alligné à droite comme je voulais, mais il est affiché à gauche, la partie central est affiché en dessous alors que je voudrais que la parte centrale du site soit affiché à gauche et le colonne droite soit affiché à droite. J'essaye avec float: right, mais ca ne marche pas. Pouvez m'aider à comprendre le problème?

Voici mon code du fichier colonne_droite.php
<div class="col-droite">
      <?php        
  $bdd = new PDO('');

?>    
      <div class="">
<table class="marg"><tbody>
  <tr><th>Les dernières dossiers </th></tr>
<?php

    $reponse = $bdd->query('SELECT * FROM dossiers ORDER BY id DESC LIMIT 0, 10');  
   
while ($donnees = $reponse->fetch())
{  
  
?>  
 
    <tr><td>Dossier crée le <?php echo date('d/m/Y à H\hi', strtotime($donnees['date'])); //on recupère la date ?> <BR>
         <a href="dossier.html?id=<?php echo $donnees['id']; ?>"><?php echo stripslashes($donnees['titre']); //on recupère titre  ?> </a><br /></td></tr>
  
 
 <?php   
} // Fin de la boucle des news  
  
?> 
 </tbody></table>
 
</div>


et le fichier design.css
body
{
  margin-top: 0;
   background-color:#A9A9A9;
  Background-repeat: no-repeat;
  background-position:35% 65%;
  background-size: cover; 
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #181818;

}
 
#bloc_page
{
    width: 962px;
    margin: auto;
}
 header
 {
 display: inline-block;
 margin-left: -10px;
 padding-top: 10px;
 }
 
#img1{
display: inline-block; 
float: left;
margin-left: -23px;
}

#img2 {
display: inline-block;
float: left;
margin: 10px;
margin-left: -3px;
margin-bottom: -10px;
}
section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}
/* Element menu principal */
#menu{
    width: 970px;
    margin: 10px 0 0 -10px;
 padding: 0;
    list-style: none;
 background: #111;
 background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 10px 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 15px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

#menu li:hover{
        color: white;
  background-color: black;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a { 
display: block; 
float: none; 
height: auto; 
line-height: 1; 
padding: 10px 30px; 
text-transform: none; 
white-space: nowrap; 
font-size: 13px;
} 

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
color: white;
text-decoration: underline;
        background-color: black;

}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: black;
}
#menu li ul li:hover ul li a:before , #menu li ul li:hover ul li a:after { 
visibility: hidden; 
} 
#menu li ul li:hover ul { 
height: auto; 
margin: -45px 0 0 125px; 
position: absolute; 
padding: 0; 
} 
section
{
    width: 950px;
    height: auto;
    clear: both;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 5px;
 margin-top: 0;
    background-color: white;
 margin-left: -10px;
 display: inline-block;
 
}

section p
{
    font-family: Arial, "Times New Roman", sans-serif;
 
}

section h1
{
    font-family: "Arial Black", Arial, "Times New Roman", sans-serif;
 text-align: center;
}

section h2
{
    font-family: Arial, "Arial Black", Verdana, sans-serif;
 }

section a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
    color: black;
    font-weight:normal;
}
 
section a:hover /*en survolant*/
{
   text-decoration: underline;
   color: red;
}

.news {
    clear:left;
    position: relative;
 width: 700px;
}

 .news h2 {
    font-family: Arial,"Arial Black",Verdana,sans-serif;
    margin: 0;
 margin-left: 0;
 
}

.titre_news{
    font-family: Arial,"Arial Black",Verdana,sans-serif;
    font-size: 23px;
}

.titre_news a:hover {
color: black;
}
  .news p
{
 display: block;
    font-family: Arial,"Arial Black",Verdana,sans-serif;
 font-size: 14px;
    margin:4px;
 margin-left: 10px;
}

    .intro
 {
 font-family: Arial,"Arial Black",Verdana,sans-serif;
 font-size: 14px;
    margin: 0;
 padding-top: 7px;
 margin-bottom: -10px;
 margin-left: 270px;
 }
 
.hr
{
  padding: 20px;
  border-bottom: 2px solid #a6a1ff;
  width: 50%;
}


.cat_date
{
    font-size: 12px; 
 font-family: Arial,Verdana,sans-serif;
} 
.titre
{
    margin: 0;
 margin-bottom: 10px;
 margin-left: 0;
}

.introduction
{
    display: block;
 width: 89%;
    margin-top: 5px;
 margin-bottom: 5px;
 font-weight: bold;
 font-size: 13px;
 font-family: Arial, Verdana, "Times New Roman", sans-serif; 
}

.contenu
{
    display: block;
 width: 89%;
 margin-top: 10px;
    font-size: 14px;
 font-family: Arial, Verdana, "Times New Roman", sans-serif; 
}

.col-droite {
  display: inline-block;
  border-left: 3px solid #ccc;
  padding-left: 10px;
  float: right;

}

.news p, .news em, .news h2 {
  margin:5;
  padding:5;
}
table {
  width: 230px;
  
}
th {
  background-color: red;
  font-size: 15px;
}
.marg tr a:hover{
color: red;
}

.marg
{
 padding-top: 30px;
}


td, th {
   border: 1px solid black;
   font-family: Arial, Verdana, sans-serif;
  font-size: 12px;

}

.pages
{
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;   
}

.contact
{
border: none;
}
.comm a{
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
color: blue;
}
.commentaires
{
font-family: "Arial Black", Arial, Verdana, sans-serif;
font-size: 20px;
background-color: #a6a1ff;
margin-right: 300px; 
}

.coms
{
margin-right: 300px; 
}

.introd
{
font-size: 15px; 
}
.introd p
{
text-transform : none;
font-family: Arial, Verdana, sans-serif;
}


Merci d'avance pour votre aide

2 réponses

1234
 
Salut,

Ah oui, c'était effectivement ca...

Je viens d'essayer et ca a marché! Merci pour ton aide.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut
je n'ai pas regardé tout ton css et dans le html tu as une balise div sans class et qui n'est pas fermée par </div>
le principe est le suivant

html

<div id="droite"></div>
<div id="contenu"></div>

css

#droite {
float:right;
width : 200px;
}

#contenu {
margin-right : 210px; /**doit toujours être supérieur au width de #droite**/
}
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
-1