[Erledigt] 2-Spalten-Layout, dass sich an Inhalt anpasst

Turamisi · 11.09.2009, 22:29

Hallo,
ich komme gerade bei einem CSS-Problem nicht weiter:

Ich brauche ein 2-Spalten-Layout mit header und footer.

Das Spezielle ist:
Der Inhalt der sidebar und des centers sind nicht im Voraus bekannt.
Die Breite der sidebar und die Breite des centers sollen sich deswegen automatisch an den Inhalt anpassen.

Hier mein Code:
Das Problem ist, dass bei einem kleinen Browser-Fenster (oder viel Inhalt) der center unter die sidebar rutscht.

Kann ich das verhindern?

HTML-Code:

 <div style="border: lime solid 1px; width: 100%; float: left">

            <div style="border: blue solid 1px; width: 100%;">
                <p>header</p>
            </div>

            <div style="border: aqua solid 1px; width: auto; float: left">
                <p>left sidebar</p>
            </div>

            <div style="border: red solid 1px; float: left;">
                <p>main content, main content, main content, main content</p>
                <p>main content, main content, main content, main content</p>
            </div>

            <div style="border: blue solid 1px; width: 100%; float: left">
                <p>footer</p>
            </div>

        </div>

Ich habe bis jetzt nur 2-Spalten-Layoute gefunden, bei denen die Breite nicht vom Inhalt abhängt (z.B. "width: 25%" oder "wdith: 200px")

Turamisi · 13.09.2009, 11:21

Geht das einfach nicht oder habe ich die Frage schlecht gestellt?

Baltasar · 13.09.2009, 12:26

1.) setz dich mal bitte ganz dringend mit "float" und dessen wirkungsweise auseinander! DRINGEND

2.) den float aus dem main-content rausnehmen. anschließend per JavaScript die aktuelle Breite der side-bar auslesen und anschließend diesen wert als margin-left in den main-content legen.

2.a) dich doch auf eine feste breit für die side-bar einigen. dann kannst du dir das komplizierte verfahren aus schritt 2 schenken.

3.) float aus dem footer raus. ich nehme nicht an, dass du quer scrollen willst, dan macht ein elenemt mit float und width 100% einfach keinen sinn.

nikosch · 13.09.2009, 12:27

Zitat:

Das Problem ist, dass bei einem kleinen Browser-Fenster (oder viel Inhalt) der center unter die sidebar rutscht.

Ja das ist normales Floatings Verhalten. Layouttechnisch nicht sehr schön, dafür aber nutzbar. Denn was nützt mir eine 2cm breite Sidebar, nur damit die Spalten nebeneinander stehen?
Die Alternative ist, die Inhalte wegzuschneiden, damit ist aber auch niemandem gedient.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP/Access - Anfrageergebnis mit gesammten Spalten oder als Objekt ?	SkiD	PHP Tipps 2009	3	15.08.2009 23:50
[Erledigt] jede Seite hat den selben Inhalt...	ocean85	PHP Tipps 2009	14	10.03.2009 11:59
Hilfe, Seite im Internet Explorer Buggy	trowman	HTML, Usability und Barrierefreiheit	4	15.09.2008 08:32
Bild verschafft sich platz		HTML, Usability und Barrierefreiheit	14	11.08.2008 23:45
Inhalt rutscht bei 3 Spaltenlayout - IE Bug?	obi	HTML, Usability und Barrierefreiheit	8	19.06.2007 15:34
2-spaltiges Layout	dh1sbg	HTML, Usability und Barrierefreiheit	7	13.11.2006 13:52
Drei spalten layout	Marian	PHP Tipps 2006	6	02.05.2006 17:25
problem mit layout		Beitragsarchiv	12	13.10.2005 12:41
drei Spalten einer Tabelle zusammenfügen	Lia	PHP Tipps 2005-2	24	16.08.2005 15:58
spalten zählen mit ausnahmen		Datenbanken	8	16.07.2005 13:04
>>4 Spalten Layout!		PHP Tipps 2005	17	13.02.2005 04:53
Inhalt in Layout einfügen		PHP Tipps 2004	1	25.09.2004 14:15
layout + inhalt trennen		PHP Tipps 2004	4	21.09.2004 15:21
Inhalt einer Datei einbinden ohne Inhalt anzuzeigen	Corvin	PHP Tipps 2004	4	22.07.2004 09:24
[Erledigt] Bildergallerie in Drei Spalten Layout includen?		PHP Tipps 2004	3	16.07.2004 16:21

11.09.2009, 22:29
Turamisi Neuer Benutzer Registriert seit: 11.09.2009 Beiträge: 16 PHP-Kenntnisse: Anfänger	[Erledigt] 2-Spalten-Layout, dass sich an Inhalt anpasst Hallo, ich komme gerade bei einem CSS-Problem nicht weiter: Ich brauche ein 2-Spalten-Layout mit header und footer. Das Spezielle ist: Der Inhalt der sidebar und des centers sind nicht im Voraus bekannt. Die Breite der sidebar und die Breite des centers sollen sich deswegen automatisch an den Inhalt anpassen. Hier mein Code: Das Problem ist, dass bei einem kleinen Browser-Fenster (oder viel Inhalt) der center unter die sidebar rutscht. Kann ich das verhindern? HTML-Code: <div style="border: lime solid 1px; width: 100%; float: left"> <div style="border: blue solid 1px; width: 100%;"> <p>header</p> </div> <div style="border: aqua solid 1px; width: auto; float: left"> <p>left sidebar</p> </div> <div style="border: red solid 1px; float: left;"> <p>main content, main content, main content, main content</p> <p>main content, main content, main content, main content</p> </div> <div style="border: blue solid 1px; width: 100%; float: left"> <p>footer</p> </div> </div> Ich habe bis jetzt nur 2-Spalten-Layoute gefunden, bei denen die Breite nicht vom Inhalt abhängt (z.B. "width: 25%" oder "wdith: 200px") Geändert von Turamisi (11.09.2009 um 23:05 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.09.2009, 11:21
Turamisi Neuer Benutzer Registriert seit: 11.09.2009 Beiträge: 16 PHP-Kenntnisse: Anfänger	Geht das einfach nicht oder habe ich die Frage schlecht gestellt?

13.09.2009, 12:26
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	1.) setz dich mal bitte ganz dringend mit "float" und dessen wirkungsweise auseinander! DRINGEND 2.) den float aus dem main-content rausnehmen. anschließend per JavaScript die aktuelle Breite der side-bar auslesen und anschließend diesen wert als margin-left in den main-content legen. 2.a) dich doch auf eine feste breit für die side-bar einigen. dann kannst du dir das komplizierte verfahren aus schritt 2 schenken. 3.) float aus dem footer raus. ich nehme nicht an, dass du quer scrollen willst, dan macht ein elenemt mit float und width 100% einfach keinen sinn.