IE: Flexible <div> nebeneinander

Status
Nicht offen für weitere Antworten.
C

campari

Erfahrenes Mitglied
Moin,

versuche mir nen Wolf daran, zwei div-Container nebeneinander zu stellen, die das im IE beim Fenster verkleinern auch bleiben! In FF, OP, NS klappts.

Der linke Container ist fix, rechte Container soll den Rest zum rechten Browserfenster flexibel füllen.
Bislang kippt der rechte Container beim Fenster verkleinern irgendwann um, in die näxte Zeile.

PHP: 
function seite($ziel) {
	
echo "<div id='menu'>\n";
include "menu.php";
echo "</div>\n";

echo "<div id='ziel'>\n";
include "$ziel";
echo "</div>\n";
}

Code: 
#menu {
        width: 185px;
	float: left; 
	margin: 10px 0 0 0;
	border-left: 2px solid #CCCCCC;
}
#ziel {
	width: auto;
	margin: 10px 0 0 200px;
	padding: 0px 20px 2% 10px;
	border-left: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC; 
}
 
Mit dem entsprechenden Inhalt wird das DIV nun auch bei mir in die nächste Zeile verschoben, wenn das Browserfenster in der Horizontalen verkleinert wird.

Ein übergeordnetes DIV mit fester oder einer Mindestbreite könnte Abhilfe schaffen.
 
Das will ich nicht verwenden, da der Inhalt in <div id="#ziel"> unterschiedliche Breite hat.

Das muss doch irgendwie möglich sein, dass IE die beiden div's nebeneinander behält :confused:
 
An dieser Stelle mal was Grundsätzliches zum Markup.

Eine ID darf in einem Dokument nur einmal vergeben werden, die IDs #sueber,#menub,#ueber,#zueber tauchen im HTML-Quelltext aber mehrmals auf (!)

Für diesen Fall (mehrere Elemente mit gleichen Formateigenschaften) gibt es die CSS-Klasse.
 
Hi,

vielleicht hilft es dir weiter, eine minimale Breite anzugeben. In Nicht-IE-Browsern existiert hierfür
die CSS-Eigenschaft min-width. Für den IE gibt es einen Workaround, der darauf beruht,
die Mindestbreite relativ über eine fest definierte Rahmendicke zu verschieben.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Willkommen Du Lurch .oO</title>
<link rel="stylesheet" type="text/css" href="http://atomlol.at.funpic.de/php/testis.css">
<style type="text/css">
  <!--
/* ***** [START - Minimale Breite] ************************************************* */
#mainDiv{ width: 100%;
          min-width: 600px; /* Minimale Breite für Non-IE-Browser */
          background: #3F3F3F;}


  /* *********************************************************************** *
   * Min-Breite für IEs erzwingen (IE5.01, IE5.5 and IE6)                    *
   * Die minimale Breite wird durch den linken Rahmen erzwungen. Der Inhalt  *
   * wird im relativ positionierten äusseren DIV um die negative Rahmen-     *
   * breite nach links verschoben. Wird nun die minimale Breite unter-       *
   * schritten, ist nur noch Rahmen mit seiner festen Breite vorhanden und   *
   * die Bildlaufleiste wird eingeblendet.                                   *
   * *********************************************************************** */
* html #mainDiv{ border-left: 600px solid #3F3F3F; /* Minimale Breite für IE-Browser */}
#holderDiv{ display: block;}
/* Workaround, um minimale Breite für IE-Browser zu erreichen */
* html #holderDiv{ position: relative;
                   margin-left: -599px;
                   float: left;}
/* ***** [ENDE  - Minimale Breite] ************************************************* */
 //-->
</style>
</head>
<body>
<div id="mainDiv">
  <div id="holderDiv">
    <!-- Dein bisheriger Content -->
  </div>
</div>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Wäre ja im Prinzip auch ne fixe Breite.
Trotzdem interessante Lösung.

Spricht eigentlich was gegen die Lösung:

Code: 
posititon: absolute;
top: 90px;
left: 220px;

michaelsinterface hat gesagt.:
Eine ID darf in einem Dokument nur einmal vergeben werden, die IDs #sueber,#menub,#ueber,#zueber tauchen im HTML-Quelltext aber mehrmals auf (!)

Für diesen Fall (mehrere Elemente mit gleichen Formateigenschaften) gibt es die CSS-Klasse.
Zum Vergrößern anklicken....

Ich werd nicht schlau, was Du meinst.
Muss die ID's doch mehrmals verwenden jeweils für die zu formatierenden Textstellen.

Grüsse
campari
 
campari hat gesagt.:
Muss die ID's doch mehrmals verwenden jeweils für die zu formatierenden Textstellen.
Zum Vergrößern anklicken....
In diesem Fall müssen CSS-Klassen zum Einsatz kommen, da eine ID nur einmal in einer Seite vergeben werden darf, also:

aus IDs

Code: 
#sueber { }
#menub { }

#ueber { }
#zueber { }
HTML: 
<div id='msueber'><span class='topic'><u>Men&uuml;&nbsp;</u></span></div>
<div id='sueber'><span class='ueber'>Suchen</span></div>
<div id='menub'><a href='index.php'>Wursttheke</a></div>
<div id='menub'><a href='index.php'>K&auml;setheke</a></div>
<div id='menub'><a href='index.php'>Weinregal</a></div>
<div id='sueber'><span class='ueber'>Eingeben</span></div>
<div id='menub'><a href='index.php'>Wurst</a></div>
<div id='menub'><a href='index.php'>K&auml;se</a></div>
<div id='sueber'><span class='ueber'>Account</span></div>
<div id='menub'><a href='index.php'>Astra</a></div>
<div id='menub'><a href='index.php'>Oetti</a></div>
<div id='menub'><a href='index.php'>Becks</a></div>
<div id='sueber'><span class='ueber'>Und weg</span></div>
<div id='menub'><a href='index.php'>Logout</a></div>


<div id='ueber'><div id='zueber'><span class='topic'><u>Dein Account&nbsp;</u></span></div></div><br>
<div id='ueber'><div id='zueber'><span class='ueber'>Du bist eingeloggt.</span></div></div><br>
<div id='ueber'><div id='zueber'><span class='text'>Wenn Du nicht  dumm  bist, kannst Du Dich <a href='index.php'>hier</a> abmelden.</span></div></div><br>
<div id='ueber'><div id='zueber'><span class='text'>Dein letzter Besuch war irgendwann.</span></div></div>
werden Klassen

Code: 
.sueber { }
.menub { }

.ueber { }
.zueber { }
HTML: 
<div id='msueber'><span class='topic'><u>Men&uuml;&nbsp;</u></span></div>
<div class='sueber'><span class='ueber'>Suchen</span></div>
<div class='menub'><a href='index.php'>Wursttheke</a></div>
<div class='menub'><a href='index.php'>K&auml;setheke</a></div>
<div class='menub'><a href='index.php'>Weinregal</a></div>
<div class='sueber'><span class='ueber'>Eingeben</span></div>
<div class='menub'><a href='index.php'>Wurst</a></div>
<div class='menub'><a href='index.php'>K&auml;se</a></div>
<div class='sueber'><span class='ueber'>Account</span></div>
<div class='menub'><a href='index.php'>Oetti</a></div>
<div class='menub'><a href='index.php'>Becks</a></div>
<div class='sueber'><span class='ueber'>Und weg</span></div>
<div class='menub'><a href='index.php'>Logout</a></div>


<div class='ueber'><div class='zueber'><span class='topic'><u>Dein Account&nbsp;</u></span></div></div><br>
<div class='ueber'><div class='zueber'><span class='ueber'>Du bist eingeloggt.</span></div></div><br>
<div class='ueber'><div class='zueber'><span class='text'>Wenn Du nicht  dumm  bist, kannst Du Dich <a href='index.php'>hier</a> abmelden.</span></div></div><br>
<div class='ueber'><div class='zueber'><span class='text'>Dein letzter Besuch war irgendwann.</span></div></div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück