✔ Zwei divs nebeneinander ohne absolute Positionierung

Status
Nicht offen für weitere Antworten.
SilentWarrior

SilentWarrior

Erfahrenes Mitglied
Guten Abend, Community

Ich bin gerade dabei, meine Homepage neu zu erstellen. Natürlich ohne Tabellen. ;)

Nur leider klappt das nicht wie gewünscht. Anzusehen hier: http://silentwarrior.si.funpic.de/.

Ich hab jeweils die ganzen Navigationslisten und den Inhalt an sich in ein div gesteckt, in der CSS-Datei steht folgendes:
Code: 
div#navigation, div#content {
    display:inline;
}
Dadurch sollen die beiden divs nebeneinander stehen, also links die Listen und rechts der Inhalt. (Eben wie eine Tabelle mit einer Zeile und zwei Spalten.)

Nur leider funktioniert das nicht. Mir ist klar, dass es an den Tags, die im div drin sind, liegt, da z. B. wenn in den beiden divs nur "test" steht, es prima funktioniert. Nur wie mache ich das jetzt? Ich kann doch nicht einfach alle möglichen Tags auf display:inline setzen, dann würden ja bspw. die Überschriften ihren Sinn verlieren. Gibt's da irgendeine schlaue Lösung? CSS-Profis her! (Naja... vielleicht, bzw. vermutlich ist das eher eine Anfängerfrage. :rolleyes:)

Vielen Dank schon im Voraus

MfG

SilentWarrior
 
Hallo SilentWarrior,

tausche display:inline gegen float:left und gebe beiden DIVs eine Weite [%]:
Code: 
div#navigation, div#content {
        float:left;
        width: 50%;
}
bzw. unterschiedliche Breiten:
Code: 
div#navigation {
        float:left;
        width: 30%;
}
div#content {
        float:left;
        width: 70%;
}
greez, maik.l
 
Hi Michael

Danke für den Tip, das funktioniert wunderbar. Allerdings habe ich noch zwei Fragen:
  1. Wieso funktioniert es mit float:left, aber nicht mit display:inline?
  2. Kann man die Breitenangabe nicht weglassen? Das Problem ist halt, dass sich die beiden divs überlappen, wenn jemand die Schriftart vergrössert. Die sollten sich irgendwie dynamisch anpassen.
 
1. display:inline funktioniert wohl nur mit CSS-Klassen:
Code: 
div.box
{
display: inline;
margin: 10px;
padding: 20px;
border: 1px solid #000000;
}

<div class="box"> box 1</div>
<div class="box"> box 2</div>

2. Wenn du keine Weitenangabe angibst, wird der Content-Bereich im Mozilla (1.6) erst unterhalb der Navigation angezeigt ...

greez, maik.l
 
Zuletzt bearbeitet von einem Moderator:
Hm also dass das nur mit Klassen funktioniert, glaub ich jetzt nicht wirklich. Hab's auch ausprobiert, leider erfolglos. :(

Gibt es denn keinen Workaround für dieses Problem? Scheinbar gibt es ja keine "normale" Lösung ohne Breitenangabe. Schade irgendwie. :(
 
Hm, soweit ich weiss geht display:inline mit divs erstmal gar nicht. Aber das von Dir gewünschte geht doch auch mit float:left einfach dem linken div eine Größenangabe in em angeben, dann passt die sich der vom User eingestellten Schriftgröße an (den Schriften natürlich auch diese Größenangabe verpassen) und dem rechten ein margin-left verpassen mit mindestens der Größe des linken divs (aufpassen wenn noch padding hinzufügst, da IE dieses ja von der gesamten Größe abzieht und die anderen Browser das dazuzählen). Das Rechte braucht dann keine seperate Größenangabe mehr.

Ein Beispiel:

Code: 
#left {
	width:13em;
	background-color:#CCC;
	float:left;
	height:100px;
	padding:1em;
}

#content {
	background-color:#000099;
	height:200px;
	margin-left:15em;
	padding:1em;
}

HTML: 
<div id="left">Links</div>
<div id="content">Inhalt</div>
 
Zitat von SilentWarrior
Hm also dass das nur mit Klassen funktioniert, glaub ich jetzt nicht wirklich. Hab's auch ausprobiert, leider erfolglos
Zum Vergrößern anklicken....
Zitat von c2uk
Hm, soweit ich weiss geht display:inline mit divs erstmal gar nicht
Zum Vergrößern anklicken....
Habe folgenden Source erfolgreich in meinen Browsers getestet [ IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]
Code: 
<html>
<head>
<title></title>

<style type="text/css">
<!--
div.content
{
display: inline;
margin: 10px;
padding: 20px;
border: 1px solid #000000;
}
-->
</style>

</head>
<body>

<div class="content">content 1</div>

<div class="content">content 2</div>

<div class="content">content 3</div>

<div class="content">content 4</div>

</body>
</html>
greez, maik.l
 
Bei meinem Firefox und IE kommen da aber zwei unterschiedliche Ergebnisse raus, zwar immer noch in Reihe, aber nicht gleich. Außerdem frisst Firefox keine Breiten- oder Höhenangaben bei diesen, weder px, em noch %.

Hast in einen auch mal richtig Content reingefüllt? Also mehr als nur content 1, 2, 3. Da passieren richtige funny Sachen, je nachdem in welchem Browser (mit Firefox 1.0 und IE 6.0 getestet) Du schaust, ergo nicht praktikabel.

Da ist die float Variante doch schon viel besser
 
@c2uk,

wollte mit dem obigen display:inline - Beispiel nur SilentWarrior demonstrieren, dass sich die Methodik auf DIVs mit einer CSS-Klasse (.content) generell anwenden lässt.

Natürlich ist die float-Methode für ein zweispaltiges Seitenlayout geeigneter.

greez, maik.l
 
Hast in einen auch mal richtig Content reingefüllt? Also mehr als nur content 1, 2, 3. Da passieren richtige funny Sachen, je nachdem in welchem Browser (mit Firefox 1.0 und IE 6.0 getestet) Du schaust, ergo nicht praktikabel.
Zum Vergrößern anklicken....
Genau das ist mein Problem. Wenn in den Divs nur Text drin steht, funktioniert es wunderbar, aber das ist natürlich nicht der Fall.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück