zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV: zweite Spalte unten ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.11.2003, 19:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2003
Beiträge: 3
Rene befindet sich auf einem aufstrebenden Ast
Standard DIV: zweite Spalte unten ausrichten

Hallo.

Ich versuche etwas, was mit Tabellen-Layout ein Klacks ist, auch mit CSS-Only zu machen:
Ein Layout mit zwei Spalten, der Inhalt der rechte Spalte soll unten bündig mit der linken Spalte ausgerichtet sein. In Tabellen Technik ganz einfach mit valign="bottom":
Code:
<table width="400" border="1">
  <tr>
    <td width="200">
      Est notare quam littera gothica! Litterarum formas humanitatis
      per seacula quarta decima et; nunc nobis videntur parum clari. ...
    </td>
    <td valign="bottom">
      Qui nunc nobis videntur
    </td>
  </tr>
</table>
Wie mache ich das den Browsern mit CSS begreiflich? Ich hab's mit vertical-align und bottom: 0px probiert, klappt aber leider nicht.

Code:
  <style rel="stylesheet" type="text/css">
    #container {
      border: thin solid black;
      width:  400px;
    }

    #links {
      border: thin solid blue;
      float:  left;
      width:  200px;
    }

    #rechts {
      border: thin solid red;
      bottom: 0px;
      vertical-align: bottom;
    }
  </style>

...

<div id="container">
  <div id="links">
    Est notare quam littera gothica! Litterarum formas humanitatis per 
    seacula quarta decima et; nunc nobis videntur parum clari. ...
  </div>
  <div id="rechts">
    Qui nunc nobis videntur
  </div>
</div>
Siehe auch http://home.telebel.de/referti/tests/rechtsunten.html

Hab schon diverse CSS-Seiten durchforstet, aber leider nichts passendes gefunden. Absolute Positionierung fällt aus, da der "container" irgendwo auf der Seite steht und auch mehrfach vorkommen soll.

Jemand eine Idee, Tipp oder Denkanstoss? Wunderbar, her damit

Ciao, René
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.11.2003, 20:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.09.2003
Beiträge: 129
Alex befindet sich auf einem aufstrebenden Ast
Standard

klar hab ich den

vertical-align kann nicht gehen, das bezieht sich auf die ausrichtung von inline-elementen bezüglich der schriftlinie. ein div ist aber ein block-element und deswegen davon nicht betroffen.

die lösung für den problem ist position:relative und position:absolute. der äußere container kriegt relative, der innere absolute, in verbindung mit bottom:0. und schon hast was du willst.

aber vorsicht: opera und alte ie's machen da evtl probleme. kommt drauf an, ob dich das stört oder nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.11.2003, 20:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2003
Beiträge: 3
Rene befindet sich auf einem aufstrebenden Ast
Standard Danke

Hallo Alex.

Vielen Dank, das isses! Muss man ja auch erst mal drauf kommen, dass man dazu relative und absolute mischen muss.
Allerdings musste ich den zweiten Container noch mit left: 210px nach rechts rücken, sonst überlagern sich die beiden inneren Container.

Nochmals vielen Dank!

Ciao, René
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:13 Uhr.