Child-Elemente laufen aus Parent heraus

lippoli15 · #1 (**permalink**) 19.07.2011, 09:08

Hi all,
ich habe beim schreiben dieses Beitrags ausversehen mein Browserfenster geschlossen, jetzt wird der Beitrag etwas kürzer.

Da ich nicht genau weiß wie ich mein Problem beschreiben kann, habe ich auch mit der Suche keine Lösung gefunden.

In einem WordPress-Design geht es darum, den Inhalt links und ein bis zwei sidebars rechts anzuzeigen (je nach Ansicht).

Folgendes Gerüst macht mir dabei zu schaffen:

HTML-Code:

<div id="content_wrapper">
	<div id="content">
	</div>

	<div class="sidebar" id="sidebar1">
	</div>

	<div class="sidebar" id="sidebar2">
	</div>
</div>

Hier der CSS-Code

Code:

#content_wrapper{
	position: relative;
}

#content{
	padding-left: 10px;
	padding-right: 10px;
	width: 460px;
}

.sidebar{
    border-left: 1px solid #E4E4E4;
    padding-left: 10px;
    padding-right: 10px;
    
    font-size: 0.8em;
}

#sidebar1{
	position: absolute;
	top: 0;
	right: 195px;
	width: 273px;
}

#sidebar2{
	position: absolute;
	top: 0;
	right: 0;
	width: 175px;
}

Das Problem ist: die zwei Sidebars können vom User befüllt werden (Menü-Ähnlich mit verschiedenen Elementen (Bilder, Beitragslisten, Events, ...)) und sind demenetsprechend bei manchen Seiten / Artikeln / Auflistungen länger, als der Textinhalt in #content, dann passiert dass, was ich im Anhang gescreenshottet habe.

Ich möchte eigentlich ungern mit float arbeiten, weil ich denke eine absolute Positionierung ist im Sinne der Idee.

Die frage ist also: kann das Problem ohne Float gelöst werden?

Ich freu mich auf eure Meldungen und stehe für weitere Fragen natürlich zur Verfügung.

zeji · #2 (**permalink**) 19.07.2011, 09:10

Faulx Columns könnte des Problems Lösung sein.

Und ohne Floats wirds schwierig. Du könntest zwar einem div um alle 3 herum ein position:relative, und jedes der 3 divs dann absolute positionieren, was aber wirklich nicht das Gelbe vom Ei ist.

lippoli15 · #3 (**permalink**) 19.07.2011, 09:32

Zitat:

Zitat von zeji

Faulx Columns könnte des Problems Lösung sein.

Und ohne Floats wirds schwierig. Du könntest zwar einem div um alle 3 herum ein position:relative, und jedes der 3 divs dann absolute positionieren, was aber wirklich nicht das Gelbe vom Ei ist.

Hey Zeji,
Hast Du meinen Code nicht gelesen? Ich habe das so, ein Div relative und die dadrinnen absolut, bis auf den einen der eh links oben beginnt... würds was ändern wenn ich den auch absolut mach?

Hm, nagut mit Float habe ich halt schlechte Erfahrung gemach, das ist aber schon lange her und ich wusste damals noch ncihts von einem "clear"-DIV, würde jetzt sicherlich besser funktionieren :P

Dachte halt es ginge auch so, eine Problemlösung hat mich interessiert, mal schauen was hier noch so gepostet wird, vielleicht kommt ja noch ein hilfreicher tipp ^^

zeji · #4 (**permalink**) 19.07.2011, 09:40

Sry, mein Fehler, nicht 100%ig genau durchgelesen

Wenn man weiß, wie sich floatende Elemente verhalten, sollte es auch keine Probleme geben.

Klar ist, dass alle drei Elemente eine fixe Breite haben müssen, damit sie nebeneinander floaten (grad nicht sicher obs dazu nicht auch mal einen Hack gab, der die angabe fixer breite überflüssig macht, naja

)

Float ist m.M. hier eigentlich die beste möglichkeit.

lippoli15 · #5 (**permalink**) 19.07.2011, 09:58

Ist schon umgesetzt und rennt super

ja fixe breite ist gesetzt, der Parent hat ja auch eine.

Anscheinend lohnt es, nach massiver Steigerung der CSS-Kenntnisse, diverse problematiken erneut anzugehen und zu bemerken, dass man dazulernt

Danke für deine Hilfe und den Tipp.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Parent / Child Div	lemmyk	CSS	0	04.03.2010 16:44
Xampp murrt	Schelm.isch	Serveradministration und serverseitige Scripte	2	23.06.2008 18:11
parent, child, sisters? oma, opa, urgroßvater? :D	nick	(X)HTML	12	10.02.2008 17:40
Parent erbt Eigenschaft von Child lol	nick	CSS	7	12.01.2008 16:16
Welche Positionierung für elemente eines Formulas?	bastien	CSS	3	01.01.2007 22:31