XHTMLforum - ganz einfach CSS-Design: content + sidebar

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - ganz einfach CSS-Design: content + sidebar (http://xhtmlforum.de/showthread.php?t=39752)

ganz einfach CSS-Design: content + sidebar

Hi!

Leider habe ich eine zeitlang nicht mehr so intensiv mit CSS gearbeitet und schon bekomme ich die einfachsten Sachen nicht mehr hin. :( Aber gott sei Dank gibt es ja noch euch!

Also folgendes Problem:

Ein Content links
Eine Sidebar rechte
Ein Footer unten

aber da die sidebar gefloatet wird, weiss ich ned, wie ich es bis zum footer verlängern kann.

Der orange Bereich sollte bis unten reichen, auch wenn die Sidebar mal länger ist, sollte der gelbe bereich bis unten reichen.

Quellcode:

Code:

<html>

<body>

        <div id='main'>

                <div style='width:75%;float:left;background-color:yellow;'>

                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                        main main main mai




                </div>

                <div style='margin-left:75%;background-color:orange'>

                        sidebar sidebar sidebar




                        sidebar sidebar sidebar




                        sidebar sidebar sidebar




                        sidebar sidebar sidebar




                </div>

        </div>

        <div style='background-color:green;clear:left'>footer footer footer footer footer footer footer footer</div>



</body>

</html>

Link: http://stud05.technikum-wien.at/~tw0...cssproblem.htm

Vielen Dank im Voraus
Oliver

Versuchs mal mit Faux Columns.

danke, ja das würde gehen, nur brauche ich ein div bis zum ende, da ich am ende eine abschliessende grafik plazieren muss.

aber schon mal vielen dank!

Oliver

Zitat:

Zitat von -Oliver-

danke, ja das würde gehen, nur brauche ich ein div bis zum ende, da ich am ende eine abschliessende grafik plazieren muss.

Wie meinst du das? Eine abschließende Grafik kannst du ja nach den Faux Columns einbauen.

Zitat:

aber schon mal vielen dank!

Oliver

kein Problem :)

Also, das Beispiel war ja nur eine vereinfachte Darstellung. Wofür dich das benötige ist folgendes:

http://stud05.technikum-wien.at/~tw0...ssproblem2.htm

Das rechte Div bekommt auch noch eine Abrundung aber dafür müsste das linke und rechte div gleich hoch sein.

LG Oliver

Zitat:

Zitat von -Oliver-

Du kannst doch die Abrundung der beiden Bilder (rechts und links) als extra Hintergrundbild von einem Div einbinden, das du nach den Faux Columns einbaust?!
Anm. zu dem ALA-Artikel: Du musst die Faux Columns nicht im Body einbauen, du kannst das mit jedem beliebigen Container machen.[/code]

Naja, das Faux Columns ist ja nur der Trick, dass mein einfach ein Hintergrundbild verwendet, dass über beide Bereiche geht oder?

Gibt es eine Möglichkeit, damit auch die divs zu verlängern?

LG Oliver

Zitat:

Zitat von -Oliver-

Naja, das Faux Columns ist ja nur der Trick, dass mein einfach ein Hintergrundbild verwendet, dass über beide Bereiche geht oder?

Genau, mit Faux Columns erzeugt man nur die Illusion, dass die zwei Divs gleich lang sind.
Gibt es eine Möglichkeit, damit auch die divs zu verlängern?

LG Oliver[/quote]
Eben nicht, du kannst zwei Divs nicht gleich lang machen außer natürlich mit fester Höhe.

Doch das geht. Allerdigns nur mit Hilfe einer div-Suppe:

Code:

<div id="container1">

  <div id="container2">

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

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

  </div>

</div>

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

container1 bekommt den Hintergrund für links, conateiner2 den für rechts und im footer kannst dann die passenden Abschlussgrafiken unterbringen.

Besser ist aber, due verabschiedest dich von derartigen Designs. :)