HTML Tag für mehrere Bereiche nebeneinander

[Brei]

Hallo,

ich suche in html etwas, dasss man 2 Bereiche nebeneinanderhaben kann.

Sowas wie <div>hier was</div><div>und hier was</div> direkt nebeneinander!

Frames will ich nicht benutzen, und mit Tabellen(-spalten) ist das etwas umständlich.

div mit position:absolute möchte ich wegen manchen browsern nicht verwenden.

[Krain]

<div style="float:left;clear:none;width:200px">erster teil</div>

<div style="float:left;clear:none;width:200px">zweiter teil</div>

ungetestet, müsste aber so gehen!

[Brei]

jo, geht super. Danke.

Funktioniert zwar nicht mit Netscape 4.75 aber ich denke das ist zu vernachlässigen.

[FMG]

<div style="float:left;clear:none;width:200px">erster teil</div>

<div style="float:left;clear:none;width:200px">zweiter teil</div>

so ists richtig:

<div style="float: left; clear: none; width: 200px;">erster<br />Teil</div>

zweiter<br />Teil

[kills]

hm mit p sollte es auch gehen oder?

<p>erster teil</p>

<p>zweiter teil</p>

ungetestet

[ssambdar]

hm mit p sollte es auch gehen oder?

<p>erster teil</p>

<p>zweiter teil</p>

ungetestet

Bei diesem Ansatz ist der Text untereinander, nicht nebeneinander (getestet)

[Brei]

Hab folgendes jetzt:

.navidiv{

	float:left;

	clear:none;

	width:15%;

	margin-right:80px;

	padding:20px;

	background-color:#596D7F;

}

Die Seite dann:

<div class = "navidiv">bla</div>

<div>inhaltsteil</div>

Im IE funktioniert es akezptabel, aber opera und firefox lassen zwar den Text im div für den Inhaltsteil im richtigen padding-Abstand, aber das div selber schließt direkt an den "navidiv" an. Wenn man die background-color ändert sieht man das. Sollte ich im "inhaltsdiv" auch irgendwelche css eigenschaften festlegen?

[FMG]

Mh, im IE funktionierts deshalb einigermaßen, weil er das Boxmodell nicht wirklich richtig interpretiert. Wenn man Webdesign macht sollte man stets für Opera, Firefox und Mozilla optimieren und dann evt. Hacks für den IE einbauen.

Ja, ein padding, sprich Innenabstand zum Rand.

[Brei]

hab jetzt zu diesem Thema ein neues Problem bekommen:

Was ich habe:

.navidiv{

	float:left;

	clear:none;

	width:15%;

	margin-right:80px;

	padding:20px;

	background-color:#596D7F;

}


.inhaltsdiv{

	width:100%;

	float:right;

	clear:none;	

}

in der Seite dann:

<div class="navidiv">BLA</div>

<div class="inhaltsdiv">

BLA

</div>

Problem: Wenn ich es so lasse wie es oben steht, dann wird das Inhaltsdiv unterhalb des Navi-Divs dargestellt. Also quasi umgebrochen. Es soll ja aber nebeneinander stehen.

Wenn ich beim inhaltsdiv statt 100% z.B. 70% dann klebt es am rechen Rand. Das könnte ich vermeiden indem ich das "float:right; clear:none;" entferne. Dann hab ich aber das Problem, dass das Inhaltsdiv bei langem Textinhalt wieder unterhalb des Navidivs fortgeführt wird.

[FMG]

Äh, du musst dich schon entscheiden, welches div floaten soll - entweder navdiv oder inhaltsdiv!

[Brei]

aber mit diesen Einstellungen bin ich jetzt vom Ergebnis her am nähesten dran, was ich haben will.

Habe beim Inhaltsdiv jetzt die breite auf 75%. Das einzige Problem ich das ich noch habe ist jetzt bei zu kleinem Fenster der Umbruch ziwschen den beiden divs. Da sollte bessser ein horizontaler scrollbalken kommen.

[Brei]

es will nicht hinhauen.

Mit Selfhtml bin ich jetzt glaub ich auf die "Referenzlösung" gekommen:

.navidiv{

	float:left;

	width:15%;

	margin-right:80px;

	padding:20px;

	background-color:#596D7F;

}


.inhaltsdiv{

	width:60%;

	clear:none;

	background-color:#3300FF;

}

So wie ich das verstanden habe muss das clear:none in das nachfolgende element. Also das, dass das andere umfließt.

Funktioniert aber nur im IE.

Alle anderen Browser führen den Text (wenn er lang genug ist) wieder unter dem Element weiter, das umflossen werden soll. Ich möchte aber durchgehend 2 getrennte Bereiche haben.

[FMG]

Du hast es genau verkehrt herum gemacht - das inhaltsdiv muss floaten, da es breiter ist als das navdiv.

#inhaltsdiv {

 float: right;

 clear: none;

 width: 60%;

 background: #30f;

}

Um links einen durchgehenden Balken zu erhalten, umschließt man das ganze Layout mit einem Rahmen-Div, welchem man #background:url(hintergrund.jpg) repeat-y; mitgibt, wobei das Bild hintergrund.jpg so breit ist, wie das Menü sein soll.

Dass es auch ohne clear geht und trotzdem gut aussieht, zeigt z. B. www.opensourcefan.de (die Webseite ist leider schon seit Ewigkeiten im Aufbau... )

[Brei]

also das funktioniert garnicht:

1. Sie sind untereinander (zwar versetzt, aber eben untereinander)

2. Das Inhaltsdiv klebt am rechten Rand (wollte ich eigentlich nicht)

Also ich hab jetzt mal ne Grafik gebaselt um mein Problem besser darzustellen.

http://www.zweigstelle.de.vu/divs.jpg

[FMG]

Achso, sorry, hatte es etwas falsch verstanden.

So gehts z.B.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>

<title>Titel</title>

<style type="text/css">

body {

 background: white;

 color: black;

 margin: 10%;

}

#menue {

 background: #596d7f;

 padding: 20px;

 width: 20%;

}

#menue li {

 display: block;

 list-style: none;

}

#inhaltsdiv {

 background: #30f;

 padding: 5px;

 float: right;

 clear: none;

 width: 60%;

}

</style>

</head>

<body>

<div id="inhaltsdiv">

<p>Text<br />Text<br />Text</p>

</div>

<ul id="menue">

 <li>Menuepunkt 1</li>

 <li>Menuepunkt 2</li>

</ul>

</body>

</html>

[kills]

nun musste nur noch das 2. html-Tag raus machen dann ist auch syntaktisch richtig

[Brei]

ich dachte das clear muss in das nachfolgende element? Hab ich aus selfhtml so verstanden.

Den Body margin kann ich nicht gebrauchen. Den hab ich weg gemacht und dann klebt das inhaltsdiv wieder am rechten Rand. Wie kann ich machen das, dass inhaltsdiv dann zentriert im restlichen Platz steht. (ohne dass die schrift innerhalb des divs zentriert wird)

[FMG]

dann klebt das inhaltsdiv wieder am rechten Rand

Mh, ja, genau deshalb margin im body... Anders gehts vielleicht so (ungetestet!):

#inhaltsdiv {

 margin: auto;

 text-align: left;

}

[Brei]

Ich hab jetzt einfach beim inhaltsdiv noch ein margin-right hineingepackt.

Aber ich versteh das mit float und clear noch nicht so ganz. Selfhtml gibt auch nicht sonderlich viel erklärungen.

[FMG]

Das Element, das von der Länge her größer ist, sollte die Eigenschaft clear bekommen, da es ja um das kleinere Element umfließen soll (oder auch nicht).