kostenloser Webspace werbefrei: lima-city

Maßangaben berechnen

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

1. Autor dieses Themas

   toolz

   

   toolz hat kostenlosen Webspace.

   14:09, 24.3.2012

   Vorausgesetzt, ich möchte drei DIVs nebeneinander platzieren. Dabei weiß ich, wie breit das erste und letzte DIV sind, aber das mittlere DIV soll dann den restlichen zur Verfügung stehenden Platz ausfüllen. Rein theoretisch würde das ja über eine Anweisung folgender Art funktionieren (leider geht das nicht):
   

   width: 100% - breiteLinks - breiteRechts;

   Nun versuche ich schon lange Zeit ohne Erfolg, wobei die vielversprechendste Methode folgendes war:
   

   width: 100%;
   margin: breiteLinks 0 breiteRechts;

   Allerdings wird dadurch die Breite des DIVs nicht beeinfluss, das heißt, dass das linke DIV jetzt zwar angezeigt werden kann, aber das Mittlere ist immernoch zu breit...
   
   Hat jemand eine Idee, wie ich so ein Problem lösen kann?
   
   
   Ach ja: Ich möchte das nicht über JavaScript lösen!
   
   Beitrag zuletzt geändert: 24.3.2012 14:17:04 von toolz

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

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

3. fatfox

   

   fatfox hat kostenlosen Webspace.

   14:49, 24.3.2012

   Keine Ahnung ob das mit PHP geht aber ich würde versuchen die Fensterbreite auszulesen und es absolut zu berechnen.

4. sonok

   Moderator

   sonok hat kostenlosen Webspace.

   15:03, 24.3.2012

   hm, vielleicht die divs ineinander verschachteln?
   
   <div linksausgerichtet 50px breit></div>
   <div linksausgerichtet padding-links 50 px; 100 % breit><div rechtsausgerichtet padding-rechts 50 px; 100 % breit></div></div>
   <div rechtsausgerichtet 50 px breit></div>
   
   Aber so würde ich es versuchen, hab's nicht versucht

5. chatstory

   

   chatstory hat kostenlosen Webspace.

   19:47, 24.3.2012

   Also mit PHP geht es soweit ich weiß nicht, weil der Browser zu wenige Infos an den Server schickt, außerdem kann sich die Dimension des Fensters verändern, also dürfte die Absolute Berechnung mit JS eigentlich die einzige Möglichkeit sein, die mir einfällt, wobei deaktiviertes JS natürlich zu Problemen führt :/
   
   aber sonoks Vorschlag sieht vielversprecend aus, wenn man es in nicht-pseudo-Code umwandelt ;)

6. t*****b

   19:57, 24.3.2012

   toolz schrieb:
   [...]
   wobei die vielversprechendste Methode folgendes war:
   

   width: 100%;
   margin: breiteLinks 0 breiteRechts;

   Allerdings wird dadurch die Breite des DIVs nicht beeinfluss, das heißt, dass das linke DIV jetzt zwar angezeigt werden kann, aber das Mittlere ist immernoch zu breit...
   

   
   
   Kann ja auch nicht, da:
   Gesamtbreite = Width + Padding (Innenabstand) + Border (Rahmen) + Margin (Außenabstand)
   
   

   
   Hat jemand eine Idee, wie ich so ein Problem lösen kann?
   

   
   
   Ich habe jetzt eine halbe Stunde rumprobiert, mein Ergebnis ist folgendes:
   
   

   <div style="width:100%;overflow:hidden;">
     <div style="float:left;width:200px;">
       <p style="border:1px solid red;">links</p>
     </div>
     <div style="float:left;width:100%;margin-left:-200px;margin-right:-200px;">
       <div style="width:100%;margin-left:200px;margin-right:200px;">
         <p style="border:1px solid green;">mitte</p>
       </div>
     </div>
     <div style="float:right;width:200px;">
       <p style="border:1px solid blue;">rechts</p>
     </div>
   </div>

   
   
   Beim mittleren Div gleichen sich die margin 200px / -200px wieder aus, funktioniert ohne diesen aber nicht.

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

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

Dir gefällt dieses Thema?