Fixen und Variablen Container nbeneinander floaten

Greg10

Also erstmal mein CSS:

Code

body {
	background-color:#303030;
	color:#000000;
	font-family:sans, arial, verdana, sans-serif;
	line-height:1.3em;
	text-align:left;
	background-image:url(script.php?script=public&redirect=false&file=grafics/bg.png);
	background-repeat:repeat-x;
	background-position:center top;
}
div#title {
	width:90%;
	height:189px;
	background-color:#ffffff;
	position:absolute;
	top:25px;
	left:5%;
	font-size:2em;
	text-align:left;
	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg.png);
	background-repeat:repeat-x;
	z-index:1;
}
div#ltitle {
	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg_left.png);
	width:38px;
	height:187px;
	position:absolute;
	top:25px;
	left:5%;
	background-repeat:no-repeat;
	z-index:2;
}
div#rtitle {
	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg_right.png);
	width:38px;
	height:187px;
	position:absolute;
	top:25px;
	right:5%;
	background-repeat:no-repeat;
	z-index:2;
}
div#orb {
	width:500px;
	height:160px;
	position:absolute;
	top:42px;
	left:50%;
	margin-left:-250px;
	background-repeat:no-repeat;
	z-index:2;
}
div#content {
	width:90%;
	position:absolute;
	top:212px;
	left:5%;
	text-align:left;
	background-image:url(script.php?script=public&redirect=false&file=grafics/c_bg.png);
	background-repeat:repeat-y;
	background-position:left top;
	padding:0px;
	background-color:#ffffff;
}
div#navigation {
	float:left;
	padding:15px;
	padding-top:6px;
	width:204px;
	background-color:#ffffff;
}
div#text {
	float:left;
	padding:15px;
	padding-top:6px;
	background-color:#ffffff;
}
div#language_select {
	padding:0px;
	padding-bottom:0.5em;
	padding-top:0.3em;
	margin:0px;
	margin-left:0px;
	font-size:1em;
	text-align:right;
	position:absolute;
	top:165px;
	left:80%;
}
div#bottom {
	float:left;
	width:100%;
	height:19px;
	background-color:#ffffff;
}
div#bottom_left {
	float:left;
	width:19px;
	height:19px;
	background-image:url(script.php?script=public&redirect=false&file=grafics/bottom_left.png);
	background-repeat:no-repeat;
}
div#bottom_right {
	float:right;
	width:19px;
	height:19px;
	background-image:url(script.php?script=public&redirect=false&file=grafics/bottom_right.png);
	background-repeat:no-repeat;
}

Alles anzeigen

und mein HTML (eigentlich KTPL (nicht fragen)):

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title><!-- -page_title- --></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<link type="text/css" rel="stylesheet" media="all" href="script.php?script=public&amp;file=css/style.css&amp;redirect=false" />
		<script src="script.php?script=public&amp;file=js/other.js&amp;redirect=false"></script>
		<script src="script.php?script=public&amp;file=js/fade.js&amp;redirect=false"></script>
	</head>
	<body>
		<div id="title">
		</div>
		<div id="ltitle"></div>
		<div id="rtitle"></div>
		<div id="orb"><img src="script.php?script=public&redirect=false&file=grafics/orb.png" alt="<!-- -page_title- -->" /></div>
		<div id="content">
			<div id="navigation">
				<ul>
					<!-- -navi- -->
				</ul>
			</div>
			<div id="text">
				<!-- [content] -->
			</div>
			<div id="bottom">
				<div id="bottom_left"></div>
				<div id="bottom_right"></div>
			</div>
		</div>
		<div id="language_select">
			<form method="post" action="script.php?script=set_lang">
				<p>
					<select name="lang" onchange="this.submit">
						<!-- -language_select- -->
					</select>
					<input type="submit" value="OK" />
				</p>
			</form>
		</div>
	</body>
</html>

Alles anzeigen

und jetzt mein Problem:
da  zu einem langem fließtext wird, ist der #text div breiter als zwischen der rechten außenkante von #navigation und der rechten innenkante von #content übrigbleibt daher wird (obwohl er einfach die zeile umbrechen könnte) #text eifnach unter #navi geschoben was ich natürlich vermeiden will

die frage ist jetzt nur wie....

am besten wäre dann noch wenn ich dafür sorgen kann, das ätext bündig zu #content aufhört.
normalerweise würde #text ja einfach die maximal-mögliche größe bekommen, und damit genau das tun, allerdings bekommt er die anscheinend aus irgendeinem Grund nicht (zumindest nicht wenn #naviagtion und #text doch nebeneinanderstehen, wenn der inhalt von #text nicht so lang ist)

schonmal danke für die antworten

koslowski

Moin,

also, wenn ich dich richtig verstehe willst du zwei container nebeneinander haben, einen mit fixer Breite und der andere soll immer den restlichen zur Verfügung stehenden Platz einnehmen (horizontal) und sich nicht unterhalb der gefloatenden navi auf die ganze Breite des Viewports ausdehnen.

Außerdem soll das Ganze möglichst flexibel sein.

Ich hab dir ein lauffähiges Beispiel gemacht damit du siehst wie es funktioniert:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>&nbsp;</title>


  <style type="text/css">
  *  {
     padding:0;
     margin:0;
    }
    #wrapper {
      margin-left: 14em;
    }
    #navigation {
      float:left;
      width:14em;
      background:lime;
      margin-left: -14em;
    }
    #text {
      background:silver;
      float: left;
      width: 100%;
    }
    ul  {
      padding:2em 1em;
}
    li  {
    list-style-type:none;
   }
    p {
      margin:1em;
    }
#footer  {
    clear:both;
    height:0.1px;
    font-size:0;
    line-height:0;
} 
  </style>
  <!--[if IE]><style type="text/css">
  * html #navigation {
    display: inline;
  }
  </style><![endif]-->
</head>
<body>
<div id="wrapper">
    <div id="navigation">
      <ul id="navi">
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Eine Muh,</a></li>
      <li><a href="#">eine mäh,</a></li>
      <li><a href="#">eine täterätätä,</a></li>
      <li><a href="#">Noch'n Punkt</a></li>
      <li><a href="#">Und noch einer</a></li>
      </ul>
    </div>
    <div id="text">
   <p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen
und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den 
Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht
auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell 
sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht 
sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das
sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam.</p>
    </div>
   <div id="footer">&nbsp;</div>
  </div>
</body>
</html>

Alles anzeigen

Einfach in deinen Editor reinkopieren und im Browser betrachten.

Der umschließende #wrapper bekommt ein margin-left mit der Breite von #navigation.
In diesen freigewordenen Bereich wird #navigation mittels negativem margin-left reingezogen.

#navigation und #text floaten damit sie nebeneinander stehen.
Einen clearenden #footer habe ich der Ordnung halber definiert.

#navigation bekommt noch per CC für den IE6 display:inline; (double-margin-Bug!)

Hoffe ich hab dich richtig verstanden.

koslowski

edit. Der von dir gewählte Doctype ist nicht sonderlich brauchbar. Bei diesem Doctype ( XHTML 1.1) ist der content-type nicht text/html sondern applikation/xml. Damit hat derIE6 und kleiner ein Problem. Besser ist z.B. der Doctype in meinem Beispiel (XHTML 1.0 strict), damit bist du im always Standard-Mode.

sejuma

Zunächst würde ich auf sämtliche absoluten Positionierungen verzichten. Das führt dazu, dass diese Elemente aus dem HTML-Fluss genommen sind.
Wenn du dafür mit float und margin arbeitest, dann ist das weitaus einfacher und wird auch übersichtlicher.

#text steht rechts neben der #navigation und soll diese mit dem #text-Inhalt nicht "unterlaufen".
Das erreichst du durch einen entsprechenden margin-left-Wert. Wenn nur diese beiden Div's nebeneinander angeordnet sind, reicht es, wenn #navigation gefloatet ist.

Versuch's mal so:

Code

div#text {
margin-left: 234px;
padding:15px;
padding-top:6px;
background-color:#ffffff;
}

Greg10

mit seumas methode funktioniert es soweit (@kowloski: ich habe deine nicht ausprobiert, d mir sejuma einfacher erschien und ich deswegen mit der angefangen hab)
werde dann mal den doctype ändern

und noch ein dickes danke an beide

Fixen und Variablen Container nbeneinander floaten

Tags

Benutzer online in diesem Thema