Box-Model klappt nicht

html.de-Forum HTML, XHTML & CSS
1

Hi,

ich möchte ein websitedesign machen,aber es klappt nicht, #container soll so groß sein wie sein inhalt, also #main, und und dieses soll sich nach #inhalt und #navi richten, je nachdem was größer ist… leider klappt das nicht…

hoffe mir kann jemand helfen, hier mal meine dateien:

index.html:

[code]

.::TEST::.
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
[/code]und style.css: [code]html, body { margin: 0, auto; background-color: black; font-family: Verdana; }

#container {
margin-left: auto; margin-right: auto;
width: 800px;
height: auto;
padding: 10px;
background-color: darkgrey;
border: 2px double lightgrey;
}
#banner {
margin-left: auto; margin-right: auto; margin-bottom: 20px;
width: 780px;
height: 120px;
background-color: white;
border: 1px double black;
}

#main {
margin-left: auto; margin-right: auto;
width: 760px;
height: 100%;
padding: 10px;
background-color: lightgrey;
border: 1px double black;
}

#navi {
float: right;
width: 160px;
height: auto;
padding: 10px;
background-color: darkgrey;
border: 1px groove black;
}

#inhalt {
margin: 0, auto;
float: left;
width: 540px;
height: auto;
padding: 10px;
background-color: green;
border: 1px groove black;
}[/code]

2

es muss <div id="container">
heißen und nicht

funkts dann?
mfg

3

nein, hast du ueberhaupt gelesen was das Problem ist, das Design wird schon angezeigt, aber halt ist container und main net solang wie inhhalt und navi…

4

öhm…
ist trotzdem falsch^^
wenn du willst dass sich die container anpassen, dann lass einfach die höhen und breiten weg
hast du auch nen link???
mfg

5

ne is nur local…

ähm wenn ich die höhe und breite weg mach passt ja mein design net so wie ich es will…

6

wie währs, wenn du es mal hochladen würdest damit wir uns nicht die mühe machen müssen es zu kopieren und so…
denn du musst ja davon ausgehen, das wir genau so faul sind wie du…

7

aber wenn du höhen und breiten rein machst dann sagts du doch wie groß die divs sein sollen^^
zum beispiel hast du dem browser gesagt, dass er die divs 300px breit und hoch machen soll, aber du willst dass da ein div reinkommt der 200X400px groß ist???
das ist einfach unlogisch!!!
mfg

8

Natürlich nicht. #navi floatet ja, ist somit aus dem Textfluss genommen und beeinflusst nicht mehr die Größe seines Elternelements.

Informiere Dich über die Wirkungsweise von float, und wie man es wieder aufhebt.

Gruß,
-Efchen

9

Jo,
#main enthält nur geflotete Elemente (#navi und #inhalt). Gefloatete Boxen beienflussen die Höhe des Elternelementes (#main) nicht.
#navi und #inhalt schweben nur unter der Oberkante von #main.
Um das zu ändern muss der float vor schließen des Elternelementes beendet werden (style=„clear : both;“).
Am Einfachsten geht das mit einem zusätzlichen Element im html (
):

[code]

Lorem

Ipsum


[/code]css [code] .clearer { clear: both; } [/code]Damit wird #main auf die Höhe des jeweils höheren Kinderelemtes "aufgespannt". Gleich hoch sind #nav und #inhalt deswegen aber nicht. Optisch kann man aber gleich hohe "Spalten" mit einem [I]background-image[/I] für [I]#main[/I] simulieren.

Es gibt noch elegantere Möglichkeiten (ohne zusätzliches Element) zum clearen:
Einschließen von Floats ohne zusätzliches Markup - easyclear

10

joa klappt super danke euch…