Positionnement CSS - deux éléments les uns à côté des autres

Ok, je sais que cette question a été ici au moins une centaine de fois, mais ce positionnement est me rend fou - quelqu'un peut-il m'aider?

J'ai un portlet de la page (son fond de html) avec une table et une balise div. Je voudrais position les uns à côté des autres (tableau sur la gauche, la div sur la droite). Ici sont les parties de mon code html:

<div id="page>

 <table id="logtable">
  ...
 </table>

 <div id="divMessage>
  ...
 </div>
</div>

...et CSS:

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}

#logtable {
    width: 800px;
    float: left;
}

#divMessage {
    width: 350px;
    position:relative;
    right:-5px;
    top: -20px;
}

J'ai essayé plusieurs positions - absolu, fixe, float, etc, mais je ne peut pas sembler obtenir... Merci pour toute aide!

ajouter float:left dans votre css . il prendra les mesures de largeur en fonction de son contenu. @Smajl

OriginalL'auteur Smajl | 2014-02-10

Vous pouvez utiliser...

float: left;

sur votre div 'logtable'

Je vous conseille à l'aide de la Vrd-vous de faire l'alignement du contenu de manière à envelopper le tableau dans un DIV.
Je préfère aussi utiliser inline-block sur le flotteur gauche et donne des résultats plus prévisibles.

donc...

<div id="page">
 <div id="divTable" class="InsideContent">
     <table id="logtable">
      Left
     </table>
  </div>

 <div id="divMessage" class="InsideContent">
  Right
 </div>
</div>

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}
.InsideContent{
    display:inline-block;
}
}
#divTable {
    width: 800px;
}
#divMessage {
    width: 350px;
}

Code des besoins de rangement, mais vous voyez l'idée...

JSFiddle http://jsfiddle.net/3N53d/

OriginalL'auteur Matt The Ninja

0

Utilisation float:left sur l'élément qui doit être sur la gauche et float:right sur la droite. Gardez à l'esprit que si la somme de leurs largeurs dépasse l'espace disponible dans l'élément parent, ils seront divisés en deux lignes, de toute façon.

OriginalL'auteur Dropout

Ici , vous allez, pas besoin de droit:-5px;

#divMessage {
    width: 350px;
    position: relative;
    top: -20px;
    float: left;
}

OriginalL'auteur Dimag Kharab

0

Je vois que vous avez oublié de fermer la cite <div id="page>, cela pourrait causer des problèmes, mais, fondamentalement, vous devez utiliser:
```
float: left;
```
pour la dernière div.

J'ai créé ce JSFiddle pour vous de voir si cela correspond à vos besoins.

OriginalL'auteur Victor

Vous pouvez simplement utiliser display: inline-* de les mettre côte à côte dans une rangée

#logtable {
    width: 800px;
    display: inline-table;
}

#divMessage {
    width: 350px;
    display: inline-block;
}

JSFiddle

OriginalL'auteur Olaf Dietsche

Juste de l'essayer.

Violon

CSS

#logtable {
    width: 500px;
    float: left;
    background:red;
}

#divMessage {
    width: 350px;
    position:relative;
    float:left;
    background:blue;
}

OriginalL'auteur Adrian Enriquez

essayez ceci:

 <table id="logtable">
    <tr>
        <td>
            table area
        </td>
     </tr>
 </table>

 <div id="divMessage">
  div area
 </div>
</div>  
#page {
    width: 800px;
    margin: 0px auto -1px auto;
    padding: 15px;
    border:red solid 1px;
    height:170px;
}
#logtable {
    width: 400px;
    height:150px;
    float: left;
    border: blue dashed 1px;
}

#divMessage {
    width: 350px;
    height:150px;
    right:-5px;
    top: -20px;
    border: green dashed 1px;
    float:right;
}

voici une smaple

OriginalL'auteur Hamid Talebi

En simple on peut faire comme ceci:

table#logtable, div.divMessage{
 display:inline-block;
}

table#logtable, div.divMessage{
 float:left;
 width:50%;
}

OriginalL'auteur Tonnao

Vous devez vous connecter pour publier un commentaire.