DIV positionierung...aaahhhh

[titan]

Hallo,
ich hab ein kleines Problemchen :)
Ich will eine Seite machen, bei der ich einen Div mit dem Banner, ein Div mit dem Menu und ein Div mit dem Content habe. Alles soll untereinander.

Die Höhe des Banners und des Menüs soll eine feste Größe haben und der Content (unten) soll immer den Rest der Seite auffüllen auch wenn weniger in dem Content steht.

Das Problem was ich bisher mit der positionierung habe, ist zu einem, dass das Aufüllen der Seite bis unten hin nicht klappt UND die Darstellung im IE und Firefox sind unterschiedlich. (abstände zwischen den Div sind im IE vorhanden während im FF alles passt.

Sorry wenn es etwas umständlich geschrieben ist :) Sollte meine ganze Herangehensweise falsch sein und mir dabei jemand helfen kann wäre es wunderbar.


Danke vorab!

 

[prm]

Dieses Layout sollte deinen Vorstellungen nahe kommen:
Layout mit 100 % Höhe bei fixiertem Header und Footer

Lass einfach die #leftbox weg und definiere den #content so:

#content
{
padding: 5px 5px 25px 5px;
margin-top: 40px;
}

Die Navi setzt du dann innerhalb #content ein.

 

[titan]

Hey,
genau so etwas hab fast ich gesucht, allerdings ist hier noch ein Problem bzw ich will es etwas anders :)

Was ich noch gern anders hätte ist, dass die gesamte Seite gescrollt wird. wie auf dem Screen zu sehen wird nur der Content gescrollt, Header und Footer bleiben fest.

Wie kann ich das noch ändern? Ich hoffe dann passt es :)

 

[prm]

Dann ist es ja noch einfacher.
Versuch's mal damit (hab's aber nicht ausführlich getestet):

CSS

html
{
height: 100%;
}

body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #f0f0f0;
font-family: Verdana, Arial, sans-serif;
}

#aussenwrapper
{
height: 100%;
width: 800px;
margin: 0 auto;
background: #D1DEEF;
}

#header
{
height:40px;
background: #CCE34A;
}

#footer
{
background: #333;
height:20px;
padding: 3px 0;
text-align: center;
color: #fff;
margin-bottom: -65px;
width: 800px;
margin: 0 auto;
}
h1
{font-size: 1.2em; text-align: center; margin: 0;}

HTML innerhalb body:

<div id="aussenwrapper">

<div id="header">
<h1>100 % Höhe mit Header und Footer</h1>
</div><!--Ende header-->


<div id="content">
<h3>Content</h3>
<p>Fülltext für den Content</p>
</div><!--Ende content-->

</div><!--Ende aussenwrapper-->

<div id="footer">
Footer
</div><!--Ende footer-->

 

[titan]

klappt schon mal fast :)

jedoch wird der content nicht größer wenn ich mehr inhalt reinschreibe. aber genau so habe ich mir das ganze schon vorgestellt.

 

[Efchen]

Ich will eine Seite machen, bei der ich einen Div mit dem Banner, ein Div mit dem Menu und ein Div mit dem Content habe. Alles soll untereinander.
Sollte meine ganze Herangehensweise falsch sein und mir dabei jemand helfen kann wäre es wunderbar.

das einzige, was nicht ganz okay ist, ist es, alles mit div auszuzeichnen. das ist div-Suppe, die um keinen Deut besser ist, als Tabellenlayout. Ein Menü z.B. ist eine Liste und sollte als solche ausgezeichnet werden. Ein Banner ist meistens die erste Überschrift einer Seite usw.
Nutze HTML so, wie es gedacht ist!

 

[titan]

viele wege führen eben nach rom!

 

[prm]

Ok, das Problem imit dem Überlauf hatte ich nicht getestet.
Versuch's mal damit:
Footer immer unten anordnen

Und was Efchens Anmerkungen betrifft:
Bau dir mal zunächst was auf, und dann kann man immer noch sehen, ob und was man evtl. wieder abspecken kann.

 

[titan]

das hat geklappt! danke!

 

[Efchen]

viele wege führen eben nach rom!

Ja, aber eben auch holprige, steinige, mit Schlaglöchern, über Berg und Tal, man kann die mit einem Auto, einem Ochsenkarren oder zu Fuß gehen.

Das eigentlich schlimme daran ist, dass nicht nur Du den steinigen Weg mit dem Ochsenkarren, bei dem nach nichtmal der Hälfte die Achse bricht und Du laufen musst, gehst, sondern alle Deine Besucher mit Dir.

 

[neuroleptika]

das einzige, was nicht ganz okay ist, ist es, alles mit div auszuzeichnen.

Das geht mit footerstickalt nicht anders. Es kann nur ein Element mit min-height geben. Die Kinderelemente würden min-height nicht als Bezug für weitere height: wert% verwenden können.