• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div Element in Mutter-Div nebeneinander positionieren

Damien

New member
Hallo zusammen,

ich versuche mich gerade im Umgang mit CSS und habe auch schon direkt ein Problem. Ich habe versucht nach einer Lösung für mein Problem zu googlen, aber das, was erklärt wird, hilft mir nicht weiter...

Ich hoffe, ich bekomme hier hilfreiche Tipps.. :(

Also dann mein Problem:

Ich habe ein Mutter-Div erstellt, was einen Rahmen bildet:
PHP:
div#content {
	margin-left:50px;
	padding-top:20px;
	padding-left:30px;
	padding-bottom:20px;
	width:1025px;
	min-height:200px;
	border-color:#0d1c31;
	border-width:9px;
	border-style:inset;
	text-align:center;
}

in diesem Element sollen zwei Divs nebeneinander positioniert werden:
1. Element
PHP:
div#newsboard {
	background-color:#FFF;
	width:653px;
	height:337px;
}

2. Element
PHP:
div#newsboardsmall {
	background-color:#FFF;
	width:331px;
	height:295px;
	margin-left:665px;
}


**** EDIT:
Hoppla, ich habe den html.code vergessen. Sorry.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="lib/style.css"/>
<link rel="stylesheet" type="text/css" href="lib/navi_up.css"/>
</head>
<body>
</div>

<div id="contentspacer"></div>

<div id="content">
  <div id="title"></div>
  <div id="newsboard"></div>
  <div id="newsboardsmall"></div>
</div>

<div id="footer"></div>

</body>
</html>
****EDIT-Ende


Leider sieht das Resultat so aus, dass die Divs zwar horizontal richtig positioniert sind, aber vertikal sind sie nicht auf einer Ebene.

Ich hoffe, ihr könnt mir helfen.

Vielen Dank schon einmal im Vorraus.


EDIT 2:
Wenn ich das linke Div absolute setze, dann rutscht zwar das rechte Div an die richtige Stelle, aber dann überlappt das linke Div wiederrum das Mutter-Div. Und genau das soll nicht passieren. Beide Divs sollen im Mutter-Div bleiben und das Mutter-Div soll seine Breite automatisch anpassen (das ist ja bereits mit height:auto angegeben, bzw. wenn man height nicht angibt.).
 
Zuletzt bearbeitet:
Ehm, danke! :) So einfach war das also... und ich dachte, ich hätte auch float:left probiert.. oO


Ich hab nun unterhalb des div#newsboard's ein weiteres div angehengt:
PHP:
div#contentmain {
	width:657px;
	height:61px;
	background-color:#F00;
}

Jetzt rutscht das Div im FireFox unter das newsboard, aber im IE wird es "korrekt" angezeigt.

Wie kann ich die Fehldarstellungen korrigieren?

Ich hab was von einem Google code gehört. Der soll bei sowas Abhilfe schaffen. Den habe ich zwar eingebunden, aber es zeigt sich keine Veränderung.


Wenn ich dem div#contentmain ein float:left verpasse, rutscht es aus dem Mutter-Div raus.
Im IE wird es aber weiterhin so dargestellt, wie gewünscht.

EDIT:
Der Link aus dem ersten Post ist immer aktualisiert.
 
So! Nach erfolgreicher Bekämpfung des I-Net-Problems, kann ich hier endlich weiter machen.

Danke für den Hinweis Anna.

Ich hab die Fehler behoben. Die Page ist jetzt valides.

Es ist eine ganz komische Sache... Ist ein Problem gelöst, meldet sich das nächste an.

Jetzt geht es darum, dass ich den Texthintergrund einbinden möchte.
Obwohl ich kein margin angeben habe, sind Spalten zwischen den 3 Elementen zu sehen. Und das aber auch nur im FF. IE macht keine Probleme.

Wie kommt das?

Ich hab auch versucht margin-top:0px; und margin-bottom:0px; anzugeben. FF mag einfach nicht.


Hier die 3 Divs:

head:
PHP:
div#contentmaintop {
	width:657px;
	height:61px;
	margin-bottom:0px;
	background-color:#F00;
	background-image:;
	background-repeat:no-repeat;
	clear:left;
}

body
PHP:
div#contentmainbody {
	width:621px;
	height:auto;
	margin-top:0px;
	margin-bottom:0px;
	background-color:#F00;
	background-image:;
	background-repeat:repeat-y;
	padding-left:18px;
	padding-right:18px;
}

end
PHP:
div#contentmainend {
	width:657px;
	height:51px;
	margin-top:0px;
	background-color:#F00;
	background-image:;
	background-repeat:no-repeat;
}

Link ist wieder aktualisiert.

EDIT:
Eben hab ich auch versucht ein style="margin:0px;" im Quelltexteinzufügen. Hat leider nicht geholfen.
 
Zuletzt bearbeitet:
PHP:
div#contentmainbody p {
margin:0;
}

Ein Paragraph hat von Haus aus in Browsern einen Abstand nach oben und unten. Du hast den mittleren Abschnitt mit p deklariert. p muss konkret angesprochen werden. Der IE übersieht sowas anscheinend.
 
Funktioniert! Dank dir.


+hust+ nächstes Problem:
Wenn ich jetzt wieder das kleine Newsboard einbinde, taucht wieder das nicht-auf-der-selben-horizontalen-Ebene-Problem auf.

Das sind die Divs:

PHP:
div#newsboardsmall {
	width:331px;
	height:295px;
	margin-left:659px;
	background-color:#FFF;
}

div#contentmaintop {
	width:657px;
	height:61px;
	background-color:#F00;
	background-image:;
	background-repeat:no-repeat;
	clear:left;
}

div#contentmainbody {
	width:621px;
	height:auto;
	margin-top:0px;
	margin-bottom:0px;
	background-color:#F00;
	background-image:;
	background-repeat:repeat-y;
	padding-left:18px;
	padding-right:18px;
}

div#contentmainend {
	width:657px;
	height:51px;
	margin-top:0px;
	background-color:#F00;
	background-image:;
	background-repeat:no-repeat;
}

div#contentmainbody p {
margin:0;
}

Das clear:left bei contentmaintop muss ja drin sein. Sonst rutscht das Element unter das andere.

Wenn ich dem div#newsboardsmall float:right verpasse, sieht das Design durcheinander aus.


EDIT:
Ich habe dem newsboardsmall float:right gegeben und margin-right angepasst.

PHP:
div#newsboardsmall {
	float:right;
	width:331px;
	height:295px;
	margin-right:33px;
	background-color:#FFF;
}

Das erste newsboardsmall sitzt da, wo es sitzen soll, aber das zweite, macht nicht das, was es soll.
 
Zuletzt bearbeitet:
Du weißt, das IDs nur einmal vorkommen dürfen je Seite? Lass Dir also einen anderen Namen einfallen.
Zum Problem, setz das zweite 'newsboardsmall'-Div einfach direkt unter das erste und geb ihm ggfs. einen Abstand zum ersten.
 
Nein, dass wusste ich nicht... Danke für den Hinweis.

Ich habe jetzt aber trotzdem das newsboardsmall 2x eingebunden... und es klappt.

Was kann denn passieren?


Ansonsten noch einmal herzlichen Dank für deine Geduld und deine vielen Hilfestellungen!
verneigen.gif
 
Du willst valides HTML schreiben!
IDs sind dafür vorsehen, gezielt angesprochen zu werden. Wenn Du also News in den ersten Container laden willst, kannst Du über eine zweite ID andere Nachrichten in den zweiten Container einbinden. Ansonsten sind Klassen die richtige Wahl. Der selbe Klassenname kann öfter eingesetzt werden.
The global structure of an HTML document
 
And again...

Anna, ich brauche wieder deine Hilfe, bitte.

Ich hab nun auf der rechten Seite im Mutter Div 3 Elemente eingebunden.
Auf der linke Seite sind 4 Elemente.

Das Problem ist, dass das 3. Element auf der rechten Seite sich an die untere Kante des 3. Elementes auf der linken Seite heftet.

Du hattest mir ja schon mal gesagt, dass ich das Problem mit float:left und float:right in den Griff bekomme.

Ich habe es versucht, aber es hat nicht gefruchtet.


Hier ist das dritte Element auf der rechten Seite:
PHP:
div#gamedownload {
	float:right;
	width:331px;
	height:128px;
	margin-right:33px;
	margin-bottom:10px;
}

Letztendlich sieht es so aus und das ist naja.. sieh selbst...

Wenn ich im Quellcode das Div direkt unter dem Div videooftheweek setze, klebt das rote Element an der Oberkante vom contentmaintop..

Wie kann ich dieses Problem in Zukunft denn in den Griff bekommen?
 
Zuletzt bearbeitet:
Wie kann ich dieses Problem in Zukunft denn in den Griff bekommen?

Hm, offensichtlich vergrößert sich die Div-Sammlung ständig. Deshalb: Du solltest zwei Spalten haben, erstellst also zwei Container-Divs (unterschiedliche IDs) und packst da Deine Divs rein. Den linken Container floatest Du, wie bereits unter Post 2 beschrieben und der rechte bekommt ein margin-left. Dann kannst Du weitere Divs einfach in die jeweilige Spalte einreihen und einen Abstand nach oben bestimmen.
 
Oh das ist eine gute Idee!
Werde ich gleich probieren, wenn ich zu Hause bin.

Ach da fällt mir ein, wie ist es dann mit dem Rahmen vom "Mutter"-Div?

Kann ich denn die Höhe der beiden Spalten voneinander abhängig machen?
Also ich meine, dann die beiden Spalten die selbe Höhe haben? Weil sonst schließt der Rahmen nicht an und es sieht 2geteilt aus.

Hoffe, ich konnte es verständlich erklären.
Andernfalls werde ich es heute Abend einfach so machen, wie du es vorgeschalgen hast und dann guck ich mir das Resultat an.

Bis dahin wünsch ich dir noch einen schönen Tag! :)
 
Also, ich hab alles so umgeschrieben, wie du es mir geraten hast und klappt.
Danke.

Mit dem blauen Rahmen klappt es nun leider nicht mehr. Zumindest nicht mit meinen CSS-Kenntnissen. Aber es ist nicht weniger gelungen, dank deiner Hilfe.

Es würde mich trotzdem doch sehr interessieren, wie man einen Rahmen um zwei Container legen kann. Also in einem Container 2 andere, wie die, die auf meiner Site.

Ich hab versucht die beiden Container in einem einzubetten. Wegen des float:left's den linken Containers überschneidet dieser den äußeren Container.
Das hat zur Folge, dass der äußere Container, was den Rahmen bilden soll, nicht automatisch an Höhe gewinnt.

Wie gesagt, es ist nichts zwingend notwendiges. Es würde mich nur interessieren, wie man das handlen könnte.
 
Ich hab jetzt nicht ganz Dein Szenario als Grundlage genommen, aber hier ist ein Rahmen um die Divs, der mit dem Inhalt wächst.
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>2 Divs</title>
<style type="text/css">
html, body {background: #000000;
	margin:0;
	padding:0;
	height:100%;
}
#header {
	width:700px;
	margin: 0 auto;
	height:25%;
	border: 1px solid silver;
}
#outerwrapper {
	width:700px;
	margin: 0 auto;
	min-height: 75%;
	height: auto !important;
	height: 75%;
	border: 3px solid blue;
}
#left {
	float:left;
	width: 308px;
	background: lightgreen;
}
#right1 {
	margin-left: 308px;
	background: gray;
	border: 3px solid white;
}
#right2 {
	margin-left: 308px;
	background: gray;
	border: 3px solid white;
}
</style>
</head>
<body>
<div id="header">Hier ist der Header</div>
	<div id="outerwrapper">
		<div id="left">Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		Hier steht Inhalt<br />Hier steht Inhalt<br />
		</div>
		<div id="right1">Hier steht auch was</div>
		<div id="right2">Hier steht noch was</div>
	</div>
</body>
</html>
 
Ehm anna55.. ich hab ein Problem, wo ich nicht dahinter komme, woran es liegt.

Das ist mein css:

Wieso werden die beiden divs "7shead" und "7sbg" nicht angezeigt?
 
Zuletzt bearbeitet:
Zurück
Oben