Aligner div en bas d'un autre conteneur div absolu

Je avance si cela excuse a déjà répondu sur le SO, mais je deviens fou à essayer de comprendre cela ...Aligner div en bas d'un autre conteneur div absolu

Ce code ...

<html> 
    <head> 
     <title>Print Check Sample</title> 
     <style type="text/css"> 
      body { 
       font-family: "sans-serif"; 
      } 
      #address { 
       position: absolute; 
       top: 0.25in; 
       left: 0; 
      } 
      #check_num { 
       position:absolute; 
       top: 0; 
       right: 0.5in; 
       font-size: 0.2in; 
      } 
      #container { 
       position: relative; 
       margin: 0.25in; 
       width: 100%; 
       height:3.5in; 
       border: 1px gray solid; 
      } 
      #date { 
       position: absolute; 
       top: 0.5in; 
       right: 1.5in; 
       font-size: 0.15in; 
      } 
      #pay_line { 
       float: left; 
       width: 10.5in; 
       border:2px red dashed; 
      } 
      #pay_line_container { 
       position: absolute; 
       top: 1.8in; 
       border:2px green dashed; 
      } 
      #pay_line_message { 
       float:left; 
       width:1in; 
       font-size: 0.15in; 
       border:2px blue dashed; 
      } 
      #void_message { 
       position: absolute; 
       top: 0.75in; 
       right: 0.1in; 
       font-size: 0.2in; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="check_num">1000</div> 
      <div id="address"> 
       <b>Estate Of JAMES SMITH</b><br> 
       35 Addison Avenue<br> 
       New York, NY 00000<br> 
       (123)456-7890 
      </div> 
      <div id="date"> 
       <i>Date</i>&nbsp;<u>02/08/2012</u> 
      </div> 
      <div id="void_message"> 
       <b>VOID 180 DAYS FROM CHECK DATE</b> 
      </div> 
      <div id="pay_line_container"> 
       <div id="pay_line_message"> 
        <i>Pay To The Order Of:</i> 
       </div> 
       <div id="pay_line"></div> 
      </div> 
     </div> 
    </body> 
</html>

cette image est la production ...

pay check sample

J'ai essayé d'utiliser divers combos de « flotter » et « relative » et « hauteur », mais je ne peux pas comprendre comment t o aligner le <div id="pay_line"></div> (bordure rouge) sur le bas du conteneur <div id="pay_line_container"> (bordure verte).

Cela doit fonctionner spécifiquement dans IE8. Est-ce que l'un d'entre vous peut aider ce codeur frustré à comprendre comment faire?

Source

2012-02-27 Zack Macomber

En ce qui concerne les réponses, la position absolue et la position basse pourraient être la voie à suivre. Mais je pense qu'il y a quelque chose sur votre page (pas dans la version simplifiée) qui la corrompre - l'ayant sauvé localement, le div rouge s'aligne sur le bas dans IE8 pour moi mais les divs sont en train de déborder vers la droite. – kaj

@KAJ - J'ai vu ça quand je l'ai essayé sur JS Fiddle et aussi dans Chrome - je ne sais pas pourquoi. Utilisation de l'absolu et du bas a fait l'affaire après tout ... –

essayer de faire ce:

#pay_line { 
    position: absolute; 
    bottom: 0px; 
    left: 74px; 
}

Source

2012-02-27 20:57:05 prodigitalson

Man, je pensais que j'ai essayé plus tôt et il échouait, mais ça fait l'affaire ... allez comprendre. J'avais lu plusieurs messages disant utilisation absolue et bas de 0 et je pensais l'avoir essayé mais devinez que je ne l'ai pas branché à droite ... –

Je ne suis pas sûr que je comprends bien votre question, mais pour obtenir au fond, ne pouvait pas vous positionner juste et absolument utiliser fond: 0? Cela devrait fonctionner dans IE8.

#pay_line {position: absolute; bottom: 0;}

Source

2012-02-27 20:58:00 Marcus

Ajouter vertical-align: baseline à votre ID #pay_line.

Source

2012-02-27 20:58:11

Aligner div en bas d'un autre conteneur div absolu

Répondre

Questions connexes