Zwei Infoboxen (Artikel) nebeneinander

[Jens Pielawa]

Hallo,
ich habe eine CSS-Frage, die ich nicht vernünftig hinbekomme.
Unter http://www.pro-d-tunnel.de/index.htm sieht man nach etwas Intro einen Ticker und darunter eine Infobox (hier mit der Unterschriften-Aktion). Meine Frage: ich würde gerne aus dieser länglichen Box zwei schmale machen, die nebeneinander stehen. Das wären dann natürlich auch zwei Artikel. Ich habe schon mit einem ähnlichen CSS versucht, diese zwei Boxen nebeneinander zu stellen, aber es gelingt mir nicht. Sie haben eine schmalere Breite von 206 px, aber dann stehen diese Boxen links untereinander und rechts fließen die weiteren Artikeltexte daneben. Live möchte ich das gerade nicht schalten, ich hoffe, die Erklärung reicht aus. Das CSS meiner langen Box:

#mainbox
{
	width:422px;
	margin-top:11px;
	margin-bottom:10px;
	padding:0 6px 0 10px;
	background-color:#ebfad1;
	border:1px solid #89bb46;
	-moz-border-radius:7px;
	/* Firefox */ -webkit-border-radius:7px;
	/* Safari, Chrome */ -khtml-border-radius:7px;
	/* Konqueror */ border-radius:7px;
}

#mainbox h1
{
	margin:0;
	padding:8px 6px 8px 10px;
	background-color:#89bb46;
	font-weight:bold;
	font-size:14px;
	color:#ffffff;
}

#mainbox h2
{
	margin-top:12px;
	margin-bottom:10px;
	font-size:18px;
}

#mainbox>div
{
	padding:9px 6px 4px 10px;
	border-top:1px solid #89bb46;
	border-bottom:0px solid #89bb46;
}

Wie kann ich mit eventuellen Floats o. ä. also zwei gleichartige Boxen nebeneinanderstellen, ohne dass Inhalt von unten nachrutscht?

[Tim G]

Am besten mit einer umschließenden box drumherum. Bei Artikeln eher schwierig.

Mit css wäre ein float:left für die Boxes und ein clear:right (oder left, weiss grad nicht genau) für die letzte Box der Reihe ein Weg.
Um die letzte Box anzusprechen geht der Psydo-Selektor :last-child hervorragend.
Mit clear erzwingst du einen Umbruch nach bzw. vor dem Element.


Sent from my iphone using Tapatalk

[bizon]

die nebeneinander stehen. Das wären dann natürlich auch zwei Artikel

Das müssen nicht zwei verschiedene Artikel sein, das geht auch mit 2 Inhaltselementen.

Wenn du zwei mainboxen haben möchtest, solltest du aus #mainbox - .mainbox machen.

Zusätzlich erhält die erste(linke) .mainbox noch eine Klasse z.B. .mainbox_margin, die Abstand nach rechts regelt.

und rechts fließen die weiteren Artikeltexte daneben

Gib dem ersten Element, das nicht mehr fließen soll die Klasse clear. Diese Klasse ist im Contao-core schon definiert.

[Jens Pielawa]

Wenn du zwei mainboxen haben möchtest, solltest du aus #mainbox - .mainbox machen.
Zusätzlich erhält die erste(linke) .mainbox noch eine Klasse z.B. .mainbox_margin, die Abstand nach rechts regelt.

Das erschließt sich mir noch nicht so recht... Ich habe jetzt zwei getrennte Boxen mit folgenden Codes, und das clear hilft schon mal, aber trotzdem kommen beide noch nicht nebeneinander.

#mainbox1
{
	width:206px;
	float:left;
	padding:0 6px 0 10px;
	margin-top:11px;
	margin-bottom:10px;
	background-color:#ebfad1;
	border:1px solid #89bb46;
	-moz-border-radius:7px;
	/* Firefox */ -webkit-border-radius:7px;
	/* Safari, Chrome */ -khtml-border-radius:7px;
	/* Konqueror */ border-radius:7px;
}

#mainbox1 h1
{
	margin:0;
	padding:8px 6px 8px 10px;
	background-color:#89bb46;
	font-weight:bold;
	font-size:14px;
	color:#ffffff;
}

#mainbox1 h2
{
	margin-top:12px;
	margin-bottom:10px;
	font-size:18px;
}

#mainbox1>div
{
	padding:9px 6px 4px 10px;
	border-top:1px solid #89bb46;
	border-bottom:0px solid #89bb46;
}

#mainbox2
{
	width:206px;
	clear:right;
	margin-top:11px;
	margin-bottom:10px;
	padding:0 6px 0 10px;
	background-color:#ebfad1;
	border:1px solid #89bb46;
	-moz-border-radius:7px;
	/* Firefox */ -webkit-border-radius:7px;
	/* Safari, Chrome */ -khtml-border-radius:7px;
	/* Konqueror */ border-radius:7px;
}

#mainbox2 h1
{
	margin:0;
	padding:8px 6px 8px 10px;
	background-color:#89bb46;
	font-weight:bold;
	font-size:14px;
	color:#ffffff;
}

#mainbox2 h2
{
	margin-top:12px;
	margin-bottom:10px;
	font-size:18px;
}

#mainbox2>div
{
	padding:9px 6px 4px 10px;
	border-top:1px solid #89bb46;
	border-bottom:0px solid #89bb46;
}

[Tim G]

Sagen wir du hast zwei Artikel im Footer.
Dann reicht:

#footer .mod_article { float:left; width:45%;}

#footer .mod_article:last-child {clear:left;}

Ganz allgemein. Kannst du natürlich verfeinern, aber so liegen die erstmal nebeneinander.

Kannst auch display:inline; nutzen.


Sent from my iphone using Tapatalk

[bizon]

.mainbox {
    background-color: #EBFAD1;
    border: 1px solid #89BB46;
    border-radius: 7px 7px 7px 7px;
    float: left;
    margin-bottom: 10px;
    margin-top: 11px;
    padding: 0 6px 0 10px;
    width: 192px;
}

.mainboxmargin {
	margin-right: 20px;
}

.mainbox h2 {
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 12px;
}

Bei dieser Lösung gibt es nur eine CSS-Definition für die mainbox.
Es muss aber eine Klasse .mainbox sein, da diese jetzt mehrfach auf der Seite verwendet wird.
Beide Spalten erhalten die Klasse mainbox
Die linke Spalte erhält zusätzlich die Klasse mainboxmargin (Abstand zwischen den Spalten)

Das erste Element nach den mainboxen bekommt die Klasse clear, um die floats wieder aufzuheben.

[Andreas]

Warum nicht mit subcolumns?

[Jens Pielawa]

Hoppala – ich bekam eben den Hinweis von einem Besucher, dass mit meiner Seite etwas nicht stimmt. Im Firefox sieht sie normal aus, im Chrome offenbar ohne (oder mit fehlerhaftem) CSS, siehe Bild. Wo ist denn jetzt da der Haken?

Edit: testweise die befummelten Boxen ausgeklinkt und auch das dazugehörige meinige CSS, aber es bleibt im Chrome "nackt", im Firefox nicht... Häh?

[Andreas]

Dann hast du bestimmt irgendwo in deinem CSS einen Fehler, welcher vom FF korrigiert wird und von Chrome nicht. Z.B. hast du diese Regel

.enclosure { font-family:Georgia,Times New Roman,Times,serif; font-size:14px; margin-top:14px; padding-bottom:6px;{} 

[Jens Pielawa]

Dann hast du bestimmt irgendwo in deinem CSS einen Fehler, welcher vom FF korrigiert wird und von Chrome nicht. Z.B. hast du diese Regel

.enclosure { font-family:Georgia,Times New Roman,Times,serif; font-size:14px; margin-top:14px; padding-bottom:6px;{} 

Däh! Genau der war's! Vorgestern händisch reingekloppt und eine öffnende Klammer zu viel. Danke für das detektivische Aufspüren!
So, dann will ich mich mal wieder an die zwei Boxen wagen, denn die habe ich panisch erst mal ausgestellt.

Edit: Ein großes Dankesehr an bizon, sein CSS-Vorschlag funktioniert nun bestens.