Positionner du texte/image avec une bordure

Question

Apprendre html/css, avoir des problèmes avec le positionnement du texte et/ou des images dans une bordure sur une page exactement où je les veux. J'essaie d'abord de les empiler verticalement, mais je ne sais pas comment déplacer chaque boîte en dessous, au moment où ils s'empilent horizontalement jusqu'à ce qu'ils dépassent la largeur maximale, que dois-je faire? HTML:

<div id="column1"> 
<p>blah blah blah</p> 
</div> 

<div id="column2"> 
<p>blah blah blah</p> 
</div> 
<div id="column3"> 
<p>blah blah blah</p> 
</div> 

CSS:

p { 
font-family: Tahoma; 
font-size: 14px; 
margin: 1px; 
padding: 10px; 
text-align: left; 
background-color: white; 
width: 800px; 
} 

#column1 {float: left; position: relative; width: 200px; padding: 3px; background: gray ; top: 10px;margin: 1px; } 

#column2 {float: left; position: relative; width: 200px; padding: 3px; background: orange; top:50px;margin: 1px; } 

#column3 {float: left; position: relative; width: 200px; padding: 3px; background: gray; top: 100px;margin: 1px; } 

Answer 1

Si je vous ai bien compris, je pense que votre solution la plus rapide serait d'envelopper tous les éléments de frontière en un seul div avec flotteur mis à gauche . Vous pouvez ensuite placer vos éléments à l'intérieur de cette div sans jeu de flotteurs. Les paragraphes auront par défaut une nouvelle ligne à la fin et les images peuvent être suivies d'une étiquette < br/>.

Edit:

Je l'ai vu la question a été mise à jour alors essayez ceci:

<div id="border"> <div id="column1"> <p>blah blah blah</p> </div> 

<div id="column2"> <p>blah blah blah</p> </div> <div id="column3"> <p>blah blah blah</p> </div> </div> 

<style> 

p { font-family: Tahoma; font-size: 14px; margin: 1px; padding: 10px; text-align: left; background-color: white; 
} 

#border {float: left;} 

#column1 {position: relative; padding: 3px; background: gray ; margin: 1px; } 

#column2 {position: relative; padding: 3px; background: orange; margin: 1px; } 

#column3 {position: relative; padding: 3px; background: gray; margin: 1px; } 

</style> 

Answer 2

essayer d'ajouter ceci à chaque boîte

clear: both;

Answer 3

Vous tout a flotté à gauche. Essayez ceci:

#column1 {width: 200px; ...} 

#column2 {width: 200px; ... } 

#column3 { width: 200px; position:relative; padding: 3px; background: gray; top: 100px;margin: 1px; } 

Désolé: je viens de réaliser que vous voulez les verticales et non horizontales. Supprimez complètement le flotteur et cela devrait entraîner l'empilage vertical des divs.

Answer 4

Supprime le flottant, la position et le sommet des règles CSS pour # column1, # column2 et # column3. Les Divs (et les paragraphes) sont des éléments de niveau bloc et seront empilés verticalement par défaut.

EDIT: D'accord, je pense que je vois ce que votre problème est maintenant ... en utilisant le CSS que vous avez publié - au lieu d'utiliser la couleur d'arrière-plan pour indiquer une frontière, changer le # colonne1, # colonne2 et # COLUMN3 divs utiliser la bordure et retirer le rembourrage. En outre, ajoutez clear: left:

#column1 {float: left; position: relative; width: 200px; border: 3px solid gray ; top: 10px;margin: 1px; clear:left; } 

#column2 {float: left; position: relative; width: 200px; border: 3px solid orange; top:50px;margin: 1px; clear:left; } 

#column3 {float: left; position: relative; width: 200px; border: 3px solid gray; top: 100px;margin: 1px; clear:left; }