To dlaczego ta strona:
Moja stronawyswietla sie okej jak w div'ie "pudlo" mam ustawione height na 700 pikseli natomiast jak zamieni sie to na 100% to juz wyswietlanie jest błędne


dokument CSS:
a:hover
{
color: rgb(255, 0, 0);
}
div#pudlo
{
background: rgb(255, 165, 0);
width: 100%;
height: 700px;
}
div#naglowek
{
color: rgb(128, 0, 128);
width: 100%;
height: 15%;
}
div#naglowek1
{
float: left;
width: 40%;
text-align: center;
font-size: 20pt;
font-weight: bold;
}
div#naglowek2
{
float: right;
width: 60%;
}
.obrazek1
{
float: right;
}
div#zawartosc
{
float: right;
width: 80%;
text-align: left;
vertical-align: top;
background: rgb(255, 255, 255);
height: 100%;
}
.obrazek2
{
float: left;
padding: 2%;
}
.autor
{
font-weight: bold;
text-align: center;
}
.menu
{
float: left;
width: 20%;
height: 100%;
}
.menu1
{
height: 10%;
background: rgb(255, 255, 0);
text-align: center;
}
.menu2
{
height: 50%;
background: rgb(255, 255, 0);
text-align: center;
}
.tekst
{
margin: 2%;
}
.centrum
{
text-align: center;
}
.klasa12
{
text-align: center;
border-width: 1pt;
border-style: solid;
border-color: rgb(255, 0, 0);
width: 50%;
margin: 0 auto;
}
.klasa13
{
font-weight: bold;
background: rgb(0, 128, 0);
}
.klasa14
{
border-width: 1pt;
border-style: solid;
border-color: red;
background: rgb(255, 255, 0);
}
.klasa16
{
font-weight: bold;
background: rgb(0, 128, 0);
font-size: 20pt;
}
div#zawartosc1
{
float: left;
width: 80%;
text-align: center;
vertical-align: top;
background: rgb(255, 255, 255);
height: 100%;
}
I moje drugie pytanie, bo metodą prób i błędów doszedłem do tego że nagłówek tejże strony z napisem "Michał M." i obrazkiem postaci wyświetla się tak jak obecnie w tym celu dałem w div'ie w dokumencie CSS: "naglowek1" - float: left; "naglowek2" - float: right; i klasie ".obrazek1" - float: right; - ale dlaczego musiałem dać aż 3 "floaty" żeby mi wyświetlał się nagłówek tak jak obecnie