Thema: Kein Innenabstand im Layout

Hallo Zusammen,
ich habe ein ziemlich kniffeliges Problem.
Mein Layout macht keinen Innenabstand/Padding im Content Bereich.
Wenn ich dann ein Float:Left; reinpacke habe ich zwar den Abstand aber dafür kann ich dem Content nicht die ganzen 85% der Breite zuweisen, weil sich der Content dann unter die Navi setzt. Hier der Code:

HTML-Code:

#container
{
    width: 1050px;
    height: 500px;
    background-color: white;
    margin: 1em auto;            /* Zentrierung des Layouts in der Bildschrimmitte */
}

#banner
{
    width: auto;
    height: 80px;
    background-color: brown;
    text-align: center;
    clear: both;
    padding: 5px;
}

#navi
{
    width: auto;
    height: 100%;
    background-color: brown;
    float: left;
    padding: 10px;
}

#content
{
    height: 100%;
    background-color: yellow;
    padding: 10px;
}

#footer
{
    height: auto;
    background-color: brown;
    clear: both;
    padding: 5px;
    text-align: center;
}

Danke im Vorraus

geil ... danke jetzt weiß ich für demnächst bescheid .. das ich darauf nicht gekommen bin umsonst rumprobiert aber aus fehlern lernt man

habe jetzt einfach der navi width: 130px zugewiesen und dem content margin-left: 150px wegen den 20px padding ..


DANKE

Zitat von R0b

.....
nicht die ganzen 85% der Breite zuweisen, weil sich der Content dann unter die Navi setzt. Hier

Code:

#container
{
    width: 1050px;
    height: 500px;
    background-color: white;
    margin: 1em auto;            /* Zentrierung des Layouts in der Bildschrimmitte */
}

#banner
{
    width: auto;
    height: 80px;
    background-color: brown;
    text-align: center;
    clear: both;
    padding: 5px;
}

.......

Danke im Vorraus

Wenn du width in % mit padding in px mischen willst geht das so nicht.
Die Breite eines Elementes ergibt sich aus width, padding und border.
Zusätlicher Platz wird auch bei Anwendung von margin verbraucht.
Da du ein Fixes Layout #container { width: 1050px; } hast, solltest du den darin enthaltenen Elementen ebenfalls ein width in px geben. (padding-Werte mit einberechnen).

Oder du gibst den Strukturierenden Elementen <h1>, <p>, <ul> usw. den entsprechenden Padding.