3 dives neben einander, aber wie?

Status
Nicht offen für weitere Antworten.
S

supersalzi

Erfahrenes Mitglied
Hi,
tut mir leid, ich komme mir gerade sehr bloed vor diese frage hier zu stellen, aber ich find keine Loesung.
Ich moechte drei <div> elemente nebeneinander setzen. Das in der Mitten sollte eine variable breite haben, um sich der Fenstergroesse anzupassen.
Prinzipiell habe ich sowas schon gemacht (also ein verweis wie "schau mal nach float:" hilft mir gerade nicht wirklich.)
Das linke und das rechte <div> sind auch schon da, aber das Mittlere drueckt das Rechte immer nach unten.
Hier siehst du wie es nicht sein sollte...
Hat da jemand einene tip?
Danke
Salzi
 
Mein Lösungsvorschlag:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#box_left
{
float: left;
width: 120px;
background-color: #e5e5e5;
}

#box_center
{
margin: 0 125px; 
width: auto;
background-color: #00a0ff;
}

#box_right
{
float: right;
width: 120px;
background-color: #e5e5e5;
}
-->
</style>

</head>
<body>

<div id="box_left">left</div>

<div id="box_right">right</div>

<div id="box_center">center</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

[ editpost 06:38 ] Bei dem CSS-Modell ist die vorgegebene Reihenfolge der DIVs im HTML-Source zu beachten, respektive einzuhalten.
 
Zuletzt bearbeitet von einem Moderator:
Hi, erstmal danke fuer deine Musterloesung.
Aber ganz so einfach geht es irgendie nicht (oder ich bin zu bloed)
Mein Code sieht wie folgt aus. Ich glaube der Unterschied ist, dass ich die drei dives nicht allein auf der seite habe, sie befinden sich alle in einem anderen div.
Ohne inhalt der dives schaffe ich es auch, aber wenn ich nun Text in den mittleren div reinschreibe wird dieser ausgedehnt, und der Text nicht gebrochen.
Hier mal ein Stueck von einem Quelltext, eigentlich doch deiner loesung ganz aehnlich. Doch wenn du wissen willst was bei mir dabei rauskommt schaue auf den link oben.
danke nochmal.
HTML: 
/*das ist links*/
div#weblog {
   float: left;
   margin: 0px 0px 10px 5px;
   border:1px #AFC3DB;
   border-style:dotted none dotted none;
   width: 320px;
   }
/*das ist in der mitte*/
div.main-txt {
   width:auto;
   margin: 0px;
   border:1px solid red;
}
/*das ist rechts*/
div#column-menu-right {
   float: right;
   width:152px;
   height:auto;
   margin: 0px 10px 0px 0px;
   padding:0px;
   border:solid green 1px;
 
Seltsam ..., in der CSS-Datei global.css hast du für das mittlere DIV .main-txt was ganz anderes notiert, als zuletzt gepostet:

global.css hat gesagt.:
Code: 
div.main-txt {
	float: left;
	width:220px;
	height: 350px;
	margin:0px 5px 20px 35px;
	padding: 5px;
	border:none;
	}
Zum Vergrößern anklicken....
:confused:


Normalerweise müsste folgender CSS-Code Abhilfe schaffen:
Code: 
div.main-txt {
	width:auto;
	height: 350px;
	margin:0 162px 20px 35px; /* Aussenabstand: oben rechts unten links */
	padding: 5px;
	border:none;
	}
Tut er aber nicht, denn nun wird das rechts-aussen floatende DIV #column-menu-right umbrochen und erst weiter unten angezeigt. double :confused:



Okay, hab' den zweiten und entscheidenden Fehler gefunden.

Du hast im HTML-Source auf die, von mir im [ editpost ] hingewiesene, spezielle Reihenfolge der drei nebeneinander floatenden DIVs nicht geachtet:

HTML: 
<div id="weblog"> ... </div>

<div id="column-menu-right"> ... </div>

<div class="main-txt"> ... </div>
In Kombination mit oben gezeigtem CSS-Code funktioniert das Modell einwandfrei ;-]
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück