✔ Problem mit 3 div´s

N

noxum

Mitglied
Guten Abend,

ich habe ein Problem mit drei div´s welche ich nebeneinander angeordnet habe. Die Suche sowie Google habe ich schon benutzt aber leider nichts genaues gefunde.

Also die drei Boxen habe ich mal hier hochgeladen: Klick mich!

So die drei Div´s sind mit Float in eine Reihe gebracht worden. Nun möchte ich, dass das rote Div immer in der Mitte ist und auch wenn das Brwoserfenster verkleinert werden sollte, dann sollen die beiden Div´s an den Seiten ausgeblendet werden und nicht verschoben.

Im grunde will ich sagen, dass das rote Div einfach immer in der Mitte sein soll.
Leider ist bis jetzt alles fehlgeschlagen was ich bis jetzt versucht habe. Somit bitte ich hier um eure Hilfe.

Vielen Dank schonmal für alle nützlichen Antworten.
Mfg Noxum
 
noxum hat gesagt.:
So die drei Div´s sind mit Float in eine Reihe gebracht worden. Nun möchte ich, dass das rote Div immer in der Mitte ist und auch wenn das Brwoserfenster verkleinert werden sollte, dann sollen die beiden Div´s an den Seiten ausgeblendet werden und nicht verschoben.
Zum Vergrößern anklicken....
Vielleicht ist hier diese CSS-Technik Zentrieren mit nur einem Element hilfreich, in das du deine drei DIVs einbettest.

Unterschreitet hier die Breite des Browserfensters die Boxendimension, wird der linke Boxenrand "abgeschnitten". Gleiches kannst du für den rechten Boxenrand mittels overflow-x:hidden erzwingen. In dem Beispiel erscheint derzeit bei zu geringer Fennsterbreite der horizontale Scrollbalken.

Oder was stellst du dir unter dem "Ausblenden" der DIV-Blöcke vor?
 
Zuletzt bearbeitet:
Danke schonmal für deine schnelle antwort.

Also sagen wir mal die rote Box ist 800px breit, die gelbe und die schwarze sind 200px breit.
Wenn ich jetzt das Fenster auf 800px klein ziehe, dann ist die ganze gelbe Box und ein Teil von der roten Box zu sehen. Ich möchte aber wenn ich mein Fenster auf 800px ziehe nur die 800px große rote Box sehen und nicht die gelbe Box.

Ich werde deinen Rat jetzt einmal ausprobieren und melde mich dann noch einmal.

Mfg Noxum

Edid: Overflow hat leider garnichts gebracht.
 
Zuletzt bearbeitet:
noxum hat gesagt.:
Edid: Overflow hat leider garnichts gebracht.
Zum Vergrößern anklicken....
Tatsächlich?

Bei mir erwartungsgemäß sehr viel!

Anbei der ergänzte Code des Beispiels:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Zentrieren mit nur einem Element</title>
  <style type="text/css">
<!--

html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden; /* overflow-Regel hinzugefügt */
}

#center {
  
  padding:0;       
  border:1px solid #0f0; 

  
  width:1200px;      /* bestehende Breite aufgestockt */
  min-height:298px; 
  
  
  position:absolute;
  top:50%;                  
  left:50%;
  
  
  margin:-150px 0 0 -601px;  /* linken Außenabstand der Boxenverbreiterung angepasst */
}


* html #center {
  height:298px;            
}


p, h1 {
  padding:0.5em;
  margin:0;
}
ul {
 margin-top:0; 
}
h1 {
  font-size:1.2em;
}
-->
  </style>
 </head>
 <body>
  <div id="center">
   <h1>Zentrieren mit nur einem Element</h1>
   <p>Wenn das Browserfenster kleiner als das zentrierte Element ist, kann es pasieren, dass Inhalte oben und links nicht errreichbar sind.</p>
   <p>Deshalb weitere Anregungen, wie dies verhindert werden kann:
   <ul>
    <li>mit <a href="center2.html">zusätzlichem Spacer</a></li>
    <li>mit <a href="../fricca/center.html">float and clear</a> von fricca</li>
   </ul>
  </div>
 </body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück