3 Div Container nebeneinander

Maurice EL · 21. Dezember 2013

Hallo, ich mächte gerne 3 Div Container neben ein ander darstellen lassen.

HTML

<link rel="stylesheet" type="text/css" href="/style/footer-style.css" /> <div id="menu"><h2>Informationen</h2><li><a href="#" rel="nofollow">Kontakt</a></li><li><a href="#" rel="nofollow">Partner</a></li><li><a href="#" rel="nofollow">Datenschutz</a></li> <li><a href="#" rel="nofollow">Impressum</a></div><div id="info">Änderungen und Irrtümer vorbehalten. Keine Garantie über Vollständigkeit, Richtigkeit oder Aktualität der Angaben. Dies beinhaltet besonders direkte und indirekte Links zu anderen Webseiten. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich. Wir übernehmen keinerlei Garantie für die Richtigkeit, den Erhalt oder das Funktionieren angebotener Produkte. Die Markennamen und Warenzeichen sind Eigentum der rechtmäßigen Eigentümer und werden hier ausschliesslich zur Produktbeschreibung eingesetzt.</div><div id="facebook"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdiamondkey.de&width=180&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:258px;" allowTransparency="true"></iframe></div>

CSS

Code

#menu {
background-color: #FFFF00;
width: 160px;
height: 300px;
display: inline-block;
}
#info {
background-color: #008000;
width: 560px;
height: 300px;
display: inline-block;
}
#facebook {
background-color: #FF0000;
width: 180px;
height: 300px;
display: inline-block;
}

Alles anzeigen

nun passt allerdings die höhe der div´s container nicht.

Link zur homepage http://diamondkey.de/ es wird im footer dargestellt.

Bandit · 21. Dezember 2013

CROSSPOSTING

Auszug aus den Forenregeln:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]

Maurice EL · 21. Dezember 2013

aber wenn ich einen
float: left;
display: inline;
hinzufüge passiert nichts...

also ich habe jetzzt aus <div id="menu, info und facebook" jetzt <div class="menu, info und facebook"> gemacht und jetzt sind die boxen verschoben und eine bos ist weiter unten, warum?

Habe gerade schon die suchfunktion benutz, habe da auch etwas gefunden bin aber auf keine lösung bekommen.

Bandit · 21. Dezember 2013

Nur weil du dein Problem in einem anderen Forum postest, ändert das nichts daran, dass du erst einmal die Fehler im HTML-Code beseitigen solltest.

Bleistift · 23. Dezember 2013

Zitat

nun passt allerdings die höhe der div´s container nicht.

display: inline-block;

erweitert die Länge des Containers, soweit sie benötigt wird.
Wenn dein eines div also kleiner ist, ist dein anderes natürlich NICHT auch kleiner.

Deine Elemente haben keine andere Position oder Höhe.
Sie haben alle die gleiche Höhe.

Deine Info-Box müsste ein float: left bekommen und deine Facebookbox ein float: right am besten.
Alternativ kannst du für die 3 Spalten schon fast wieder eine Tabelle anlegen, oder dir mit divs deine eigene bauen.
Du musst darauf achten, dass dein Hauptcontainer auch die entsprechende Breite hat.

In deinem mittleren Container hast du ein break am Anfang des Containers.
Bei der Facebookbox zum Beispiel nicht.

Du verschachteslt da auch tausend mal die gleichen Elemente, die dir eigentlich nur ca 40Pixel klauen und einen Overhead erzeugen.
Wie Bandit gesagt hat, du solltest deinen Code mal überprüfen.
Dann kommt es in der Regel gar nicht zu so teilweise "unsauben" Code.

Raid4x · 25. Dezember 2013

Hallo, zuerst zu CSS

Code

#menu {
background-color: #FFFF00;
width: 160px;
height: 300px;
[COLOR=#ff0000]display: block;[/COLOR]
[COLOR=#ff0000]float: left;[/COLOR]
}
#info {
background-color: #008000;
width: 560px;
height: 300px;
[COLOR=#ff0000]display: block; [/COLOR]
}
#facebook {
background-color: #FF0000;
width: 180px;
height: 300px;
[COLOR=#ff0000]display: block;[/COLOR]
[COLOR=#ff0000]float: right;[/COLOR]
}

Alles anzeigen

und in HTML einfach die reihenfolge vertauschen...

HTML

<div id="menu"></div>
<div id="facebook"></div>
<div id="info"></div>

TIPP: #info einfach ohne width: 560px; dann sieht besser aus.

Tags