[CSS] Krijg container maar niet goed

[Verwijderd]

Ik krijg de css van deze site niet goed. De bedoeling is dat dit plaatje helemaal onderaan de site komt te staan, onder het poll/nieuwsbrief/hyves gedeelte. Dit lukt me niet. Ik heb hem nu als achtergrondplaatje van de container, links onder. Maar je krijgt hem niet te zien. Volgensmij is er iets verkeerd aan de container, want als ik de achtergrondkleur naar bijv. blauw verander, zie je dit niet terug in de site. Hoe zorg ik ervoor dat de container een achtergrondkleur en een achtergrondplaatje heeft? Ik ben echt al heel lang dingen aan het proberen maar ik kan de oplossing maar niet vinden. CSS: (de css staat in de map css, vandaar de ../ voor de plaatjes)

code:

img {
border-style: none;
}
body {
background-color: #410000;
font-family: Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
margin: 0;
padding: 0;
color: #FFFFFF;
}
div#container {
margin: 0 auto;
width: 650px;
background: url("../images/postzak.gif") #690000 left bottom no-repeat;

}
div#header {
height: 258px;
}
/* START MENU */
ul#menu {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
}
#menu a {
display: block; 
height: 38px; 
}
#menu a.home {
background: url("../images/home.gif") center center no-repeat;
width: 118px;
}
#menu a.home:hover {
background: url("../images/o_home.gif") center center no-repeat;
}
#menu a.nieuws {
background: url("../images/nieuws.gif") center center no-repeat;
width: 94px;
}
#menu a.nieuws:hover {
background: url("../images/o_nieuws.gif") center center no-repeat;
}
#menu a.agenda {
background: url("../images/agenda.gif") center center no-repeat;
width: 95px;
}
#menu a.agenda:hover {
background: url("../images/o_agenda.gif") center center no-repeat;
}
#menu a.fotos {
background: url("../images/fotos.gif") center center no-repeat;
width: 83px;
}
#menu a.fotos:hover {
background: url("../images/o_fotos.gif") center center no-repeat;
}
#menu a.gastenboek {
background: url("../images/gastenboek.gif") center center no-repeat;
width: 126px;
}
#menu a.gastenboek:hover {
background: url("../images/o_gastenboek.gif") center center no-repeat;
}
#menu a.contact {
background: url("../images/contact.gif") center center no-repeat;
width: 134px;
}
#menu a.contact:hover {
background: url("../images/o_contact.gif") center center no-repeat;
}
#menu span {
display: none;
}
/* EIND MENU */
div#ondervak {
background: #690000;
}
div#links {
width: 200px;
float: left;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
div#content {
width: 410px;
float: left;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
a {
color: #FFFFFF;
text-decoration: underline;
font-size: 1em;
}
a:hover {
text-decoration: none;
}
table.item {
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
tr.titel td {
font-weight: 900;
}
span.pagnav a {
text-decoration: none;
font-weight: bold;
}

Ik weet dat het background gedeelte bij #container niet goed is, maar dat deed ik alleen om te proberen... Ik kom er maar niet uit..

[BlackWhizz]

Een br die cleart achterin de container zetten. Dan trekt die de boel weer naar beneden.

[Verwijderd]

BlackWhizz schreef op zondag 15 februari 2009 @ 15:07:
Een br die cleart achterin de container zetten.

Sorry, maar wat bedoel je daar precies mee?

EDIT: Ok, heb een bottom div erbij gemaakt, die onderin de container staat. Het werkt inderdaad, maar waarom werkt het niet zonder bottom div? Dat zou toch ook gewoon moeten werken?

[ Voor 30% gewijzigd door Verwijderd op 15-02-2009 18:08 ]

[Stijn]

Omdat de inhoud van de container float: left heeft wordt die deels buiten de normale "flow" geplaatst en heeft de container dus ineens eigenlijk geen inhoud meer. Door aan het eind een element met clear:both te zetten (bijv. een div, die hebben dat standaard) krijgt de container weer inhoud en omdat hij aan beide kanten "gecleard" is wordt hij door de normale inhoud naar beneden geduwd. Aangezien het het laatste element in de container is wordt de onderkant daarvan als onderkant van de container-inhoud genomen.

[Verwijderd]

Okay... thanks! Kan slotje op..

[Cartman!]

Gebruik liever

code:

overflow:auto;

En slotjes gaan niet op slot hier als je het opgelost vind