Problème Alignement à droite

Résolu/Fermé
1234 - Modifié par 1234 le 29/09/2014 à 21:28
 1234 - 3 oct. 2014 à 15:25
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

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 29/09/2014 à 22:24
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