Andreas: Breite von DIVs abhängig von Browserbreite ändern

SELF-Forum

Breite von DIVs abhängig von Browserbreite ändern

Andreas
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich schlage mich den halben Nachmittag mit der Frage herum wie man wohl folgendes bewerkstelligen kann.

Ich habe ein DIV mit fester Breite von 600px (schwarz). Links und Rechts daneben soll jeweils ein weiteres DIV stehen mit einem Abstand von 50px zum DIV in der Mitte. (beide rot)
nun sollen die beiden roten DIVs links und rechts genau am Rand sitzen, also left:0px bzw auf der rechten seite right:0px und die jeweilige andere seite mit 50px Abstand zum mittigen DIV. So das sich die breite einfach aus der browserbreite minus 600px schwarzes div minus 100px abstand für beide seiten ergibt.

Ich hoffe was ich möchte ist verständlich. Dazuhabe ich diese beiden grafiken einmal angehangen.

Hat jemand eine Idee wie man so etwas bewerkstelligen könnte?

Im Prinzip wäre es am einfachsten denke ich wenn man zum Beispiel für das linke rote DIV sagen würde: style="position:absolute; left:0px; width:50%-350px;" die 350px ergeben sich aus breite schwarzes DIV + 50px Abstand + 50px Abstand.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Breite von DIVs abhängig von Browserbreite ändern

    bleicher Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Grüße,
    lies die artikel zu 3-spalten-layout bei selfhtml
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Breite von DIVs abhängig von Browserbreite ändern

      Andreas
      – Informationen zu den Bewertungsregeln

      Hallo,

      das ist leider genau falsch herum. Beim 3 Spalten-Layout passt sich der Inhalt an und die äußeren rahmen sind fest.

      Ich suche eine Lösung für genau den anderen Fall. Der Inhalt ist fest und die äußern Bereiche passen sich an.

      Grüße,
      lies die artikel zu 3-spalten-layout bei selfhtml
      MFG
      bleicher

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Breite von DIVs abhängig von Browserbreite ändern

        Andreas
        – Informationen zu den Bewertungsregeln

        Ich muß mich korrigieren, mit ein wenig bastelei geht es doch:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Dreispaltiges Layout</title>  
<style type="text/css">  
  body {  
    color: black; background-color: white;  
    font-size: 100.01%;  
    font-family: Helvetica,Arial,sans-serif;  
    margin: 0; padding: 1em;  
    min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */  
  }  
  
  ul#Navigation {  
  position:absolute;  
  height:550px;  
    font-size: 0.83em;  
    float: left;  
    left:0px;  
    right:50%;  
	margin-right:350px;  
  
    border: 1px dashed silver;  
  }  
  
  
  div#Info {  
   position:absolute;  
  height:550px;  
    font-size: 0.83em;  
    float: right;  
    right:0px;  
    left:50%;  
	margin-left:350px;  
  
    border: 1px dashed silver;  
  }  
  
  
  div#Inhalt {  
     position:absolute;  
  left:50%;  
  width: 600px;  
    margin-left:-300px;  
    padding: 0 1em;  
    border: 1px dashed silver;  
  }  
  div#Inhalt h1 {  
    font-size: 1.5em;  
    margin: 0 0 0.5em;  
  }  
  div#Inhalt h2 {  
    font-size: 1.2em;  
    margin: 0.2em 0;  
  }  
  div#Inhalt p {  
    font-size: 1em;  
    margin: 1em 0;  
  }  
</style>  
</head>  
<body>  
  
  <ul id="Navigation">  
  
  </ul>  
  
  <div id="Info">  
  
  </div>  
  
  <div id="Inhalt">  
    <h1>CSS-basierte Layouts</h1>  
    <h2>3-spaltiges Layout</h2>  
    <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,  
       um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;  
       die Schriftgröße der Navigation und Info-Box ist etwas verringert,  
       um den relativ geringen Breiten Rechnung zu tragen.</p>  
    <p>Nur für die äußeren Boxen ist eine Breite und float angegeben.  
       Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'  
       können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>  
    <p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand  
       gehalten und passt sich flexibel an die Fensterbreite an.</p>  
  </div>  
  
</body>  
</html>

        Hallo,

        das ist leider genau falsch herum. Beim 3 Spalten-Layout passt sich der Inhalt an und die äußeren rahmen sind fest.

        Ich suche eine Lösung für genau den anderen Fall. Der Inhalt ist fest und die äußern Bereiche passen sich an.

        Grüße,
        lies die artikel zu 3-spalten-layout bei selfhtml
        MFG
        bleicher

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln