kostenloser Webspace werbefrei: lima-city

div mit float auf 100% height

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   programtools

   programtools hat kostenlosen Webspace.

   11:38, 29.6.2011

   Hi
   Ich habe einen Container (#content) mit 2 divs (#main) & (#side).
   
   style.css
   

   #content{
       position:relative;
       overflow: hidden;
       width:1000px;
       background:#FFFFFF;
       min-height:200px;
       padding-bottom:5px;
   }
   
   #side{
       height:100%;
       background:#E8E8E8;
       width:230px;
       float:right;
       margin-top:0px;
   }
   
   #main{
       width:770px;
       background:#FFFFFF;
       float:left;
   }

   
   
   Mein Problem ist jetzt, dass das div (#side) die Höhe des divs (#content) annehmen soll - also 100%. Das klappt leider nicht. Die Höhe des divs (#side) richtet sich immer am eigenen Inhalt aus. Wie kann ich es nun anstellen, dass das dis (#side) die Höhe des (#content) hat, die ja variabel ist?
   Vielen Dank & MFG
   
   EDIT: #side und #main statt #prod_side und #prod_main. *sorry*
   
   Beitrag zuletzt geändert: 29.6.2011 12:27:44 von programtools

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. infinitysounds

   

   infinitysounds hat kostenlosen Webspace.

   11:44, 29.6.2011

   Ich weiß nicht ob das der Grund ist, aber mach mal aus Side eine Class, also .side
4. Autor dieses Themas

   programtools

   programtools hat kostenlosen Webspace.

   12:28, 29.6.2011

   Warum sollte das etwas ändern?

5. infinitysounds

   

   infinitysounds hat kostenlosen Webspace.

   12:31, 29.6.2011

   Bei mir war das mal ausschlaggebend, verstanden hab ich's auch nicht...

6. floscher

   floscher hat kostenlosen Webspace.

   12:56, 29.6.2011

   Hallo Infinitysounds,
   suche mal nach Faux Columns. Das Problem ist bekannt und offenbar mit CSS ohne zu Tricksen nicht lösbar.
   
   Lösungsmöglichkeiten:
   1. Gib dem umgebenden div (#content) ein passendes Hintergrundbild, damit es nach gleichlangen Spalten aussieht (siehe http://www.alistapart.com/articles/fauxcolumns)
   2. Packe das ganze in eine Tabelle
   3. Wenn eine Spalte main IMMER länger ist, als Spalte side, mache es folgendermaßen:
   Notiere das div#main vor div#side.
   div#main erhält eine border-right, die so breit ist, wie div#side, sowie einen margin-right, der die Breite von div#side*(-1) hat.
   div#side erhält einen transparenten Hintergrund.
   So entsteht die Illusion, dass div#side genauso hoch ist wie div#main.
   
   Ich hoffe, das hilft Dir weiter,
   
   Gruß,
   floscher
   
   Beitrag zuletzt geändert: 29.6.2011 12:58:47 von floscher
7. Autor dieses Themas

   programtools

   programtools hat kostenlosen Webspace.

   15:53, 29.6.2011

   Danke erstmal,
   
   @infinitysounds
   Ich glaube dann hatte das bei dir was mit der Reihenfolge zu tun in der css vom Browser ausgewertet wird
   1) Klassen
   2) IDs
   3) inline styles
   
   3 & 2 überschreiben daher eine Klasse. Daher kann soetwas - jenachdem wie dein QC aussah schon ausschlaggebend gewesen sein, ist aber sicher hier keine Lösung.
   
   @floscher
   Natürlich kann man es so mehr oder weniger gut lösen, aber das ist in meinen Augen Quatsch. Weil je unsauberer der QC desto schwieriger wird die Wartung, die Crossbrowserfähigkeit verringert sich ebenfalls und es macht das weitere Programmieren schwieriger.
   Abgesehen davon ist es immer ein kleiner schönheitsfehler. Wenn es nicht geht ist das schade, aber es muss doch eine Lösung geben, die schön und elegant ist ?!
   
   MFG

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?