CSS: container verdwijnt na floaten blok-element

woensdag 8 september 2010 02:58

Acties:

0 Henk 'm!

Topicstarter

Ik heb een probleem waar ik al een paar weken mee aan het worstelen ben, en waar ik maar geen oplossing voor kan vinden.

Als ik onderstaande code toepas, dan is de achtergrondkleur van #container niet zichtbaar.
Als ik de float van #inhoud verwijder, dan is de achtergrondkleur opeens wel weer zichtbaar...

Ik heb echt geen flauw idee wat dat kan veroorzaken. Zoeken met algemene termen op Google gaf geen antwoord in de goede richting.

De HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bla</title>
<link href="bla.css" rel="stylesheet" />
</head>

<body>
<div id="container">
    <div id="menu">bla</div>
    <div id="inhoud">bla</div>
</div>
</body>
</html>

De CSS:

Cascading Stylesheet:

* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    font-family: Verdana;
}

#container {
    margin: 0 auto 0 auto;
    background-color: #FF0000;
    width: 950px;
    heigth: auto;
}

#menu {
    float: left;
    background-color: #00FF00;
    width: 150px;
    height: 300px;
}

#inhoud {
    float: right;
    background-color: #FFFF00;
    width: 640px;
    height: 480px;
}

[ Voor 0% gewijzigd door BtM909 op 10-09-2010 00:32 ]

woensdag 8 september 2010 03:57

Acties:

0 Henk 'm!

8088

NaN

#container rekt niet mee omdat 'ie alleen floating elementen bevat. Door borders te gebruiken kun je dat direct zien. Als je er een lege div aan toevoegt met clear:both zal 'ie wel meerekken.

Overigens zit er een typo in je css bij #container.

F4T4L_3RR0R schreef op woensdag 08 september 2010 @ 02:58:
Zoeken met algemene termen op Google gaf geen antwoord in de goede richting.

Zoeken met container en div, twee vrij algemene termen die je zelf ook gebruikt, levert best wel wat op.

[ Voor 4% gewijzigd door 8088 op 08-09-2010 03:58 ]

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

woensdag 8 september 2010 04:00

Acties:

0 Henk 'm!

F4T4L_3RR0R

Topicstarter

Heigth in plaats van height inderdaad.

De container hoeft geen background-color te hebben, maar ik vond het vreemd dat de container niet zichtbaar was in Firebug Element Inspector.

In principe kan ik de height laten vervallen, omdat de container toch niet meerekt?

woensdag 8 september 2010 04:03

Acties:

0 Henk 'm!

8088

NaN

Jep. Ook als 'ie wel meerekt kun je height weglaten.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

woensdag 8 september 2010 04:09

Acties:

0 Henk 'm!

Yanik

Volgens mij heb je de werking van floats nog niet helemaal door. Je kunt het ook oplossen door de container floatable te maken. Margin auto werkt dan niet dus moet je de site via een ander truukje centreren.

Cascading Stylesheet:

#container {
    background-color: #FF0000;
    width: 950px;
    position: relative;
    float: left;
    left:50%;
    margin: 0px 0px 0px -475px;
}

woensdag 8 september 2010 05:00

Acties:

0 Henk 'm!

rhodium

Er zijn hiervoor betere methodes dan een floatable container

.

Bijvoorbeeld:

HTML:

<div id="container">
    <div id="menu">bla</div>
    <div id="inhoud">bla</div>
    <div class="clear" />
</div>

Cascading Stylesheet:

.clear
{
    clear: both;
}

Of bijvoorbeeld:

Cascading Stylesheet:

#container {
    margin: 0 auto 0 auto;
    background-color: #FF0000;
    width: 950px;
    heigth: auto;
    overflow: auto;
}

Maar dit is eigelijk basiskennis...

woensdag 8 september 2010 06:08

Acties:

0 Henk 'm!

F4T4L_3RR0R

Topicstarter

Thanks allemaal, het is gelukt en ik kan weer verder.

woensdag 8 september 2010 10:41

Acties:

0 Henk 'm!

MoietyMe

zij/haar

rhodium schreef op woensdag 08 september 2010 @ 05:00:
Er zijn hiervoor betere methodes dan een floatable container .

Bijvoorbeeld:
HTML:
1
2
3
4
5
<div id="container">
    <div id="menu">bla</div>
    <div id="inhoud">bla</div>
    <div class="clear" />
</div>
Cascading Stylesheet:
1
2
3
4
.clear
{
    clear: both;
}
Of bijvoorbeeld:
Cascading Stylesheet:
1
2
3
4
5
6
7
#container {
    margin: 0 auto 0 auto;
    background-color: #FF0000;
    width: 950px;
    heigth: auto;
    overflow: auto;
}
Maar dit is eigelijk basiskennis...

Kan ook korter:

Cascading Stylesheet:

#container:after {
content:"u0A00";
display:block;
clear:both;
height:0;
visibility:hidden;
}

Zie je niks van terug in je html

}

Onderwerpen