2012-03-01 2 views
1

Bon les gars, j'ai une question sur les tables de positionnement dans DIV en utilisant CSS.Tables incorporées dans DIV's

J'ai le code comme suit:

css:

#content{ 
    float:right; 
    padding-top:10px; 
    width:450px; 
    line-height: 18px; 
    font-size:13px; 
    text-align:left; 
} 

#content .reviewTable{ 
    width:20px; 
} 
#news{ 
    line-height: 18px; 
    width:150px; 
} 


#news h2 { 
    margin: 0; 
    padding: 0; 
    font-size: 16px; 
} 

#news p { 
    margin: 0; 
    padding-bottom: 20px; 
    padding-right:10px; 
    font-size:13px; 
} 

HTML:

<div id="content"> 
    <div class="reviewTable"> 
    <table> 
    <td></td> 
    </table> 
</div> 
</div> 

Ma table se trouve loin de mes nouvelles DIV il y a un rembourrage autour de la nouvelles DIV cependant J'ai enlevé cela et cela n'a fait aucune différence pour le positionnement de la table. J'ai regardé d'autres posts de Stack Overflow mais je n'arrive pas à trouver ce que je cherche. J'ai essayé le positionnement absolu et relatif dans mon CSS et aussi la largeur et aucun d'entre eux ne fonctionne pas la table où ils ont travaillé sur d'autres éléments tels que le texte brut.

J'ai aussi essayé la table <table class="reviewTable"></table>

Ma question est le code ne doit être dans un certain format afin de permettre la mise en place des tables dans une DIV qui a déjà mise en forme CSS appliquée à elle? Je cherche juste un indice dans la bonne direction les gars si vous pouviez m'aider ou quelqu'un d'autre a un problème similaire car ce serait génial.

Merci

+0

Il vous manque quelque fermeture '>' - est-ce une faute de frappe dans votre message ou dans votre code? Votre '' est également absent. –

+0

serait mieux si vous configurez un exemple sur http://jsfiddle.net pour voir de quoi vous parlez – Henesnarfel

+0

J'ai mis en place un démarreur jsfiddle, mais il faut plus d'éléments de la page ajoutée: http://jsfiddle.net/ D45Z5/ –

Répondre

0

La raison pour laquelle votre table coule est en dehors que vous flottez juste. Ensuite, vous avez la largeur définie pour être trop petite pour la zone de révision, donc il le fait aller à l'extérieur. Changez la largeur du #content en 600px et vous verrez ce que je veux dire.

Pour la manière dont vous l'avez configuré, vous devez définir #content sur 610px. Définissez le #page-container sur overflow:hidden pour empêcher que quoi que ce soit soit visible à l'extérieur de votre conteneur. Et enlever la largeur sur .reviewTable

+0

Brilliant! C'est juste ce que je cherchais. Donc, fondamentalement, la table ne rentrerait pas dans le contenu Div, donc elle le positionnerait à l'extérieur? Il n'a pas semblé qu'il était positionné à l'extérieur c'est pourquoi j'étais confus: S –

+0

La raison pour laquelle j'essayais de l'incorporer dans un autre DIV était parce que j'ai du texte sur ma page principale qui utilise #content div. Donc je me demandais juste s'il est possible de surcharger le plus petit DIV en mettant un DIV plus grand à l'intérieur pour que la table se développe? –

+0

@NATHANC Le div n'était pas vraiment positionné à l'extérieur de votre conteneur mais plutôt débordant. En flottant et en ayant une largeur trop petite, le contenu se répand à l'extérieur du récipient. – Henesnarfel

Questions connexes