Otóż problem polega na tym, że piszę sobie stronę, żeby przećwiczyć właśnie to float i coś nie działa. To znaczy: mam zaplanowane 5 "wierszy" - header, drugi podzielony na 3, trzeci i czwarty podzielony na 2 i footer. Przy pierwszym i drugim podziale udało się wszystko odpowiednio ułożyć, ale przy trzecim cała pozostała zawartość jakby chowa się w ostatnim divie... A ja już absolutnie nie wiem dlaczego. Pomocy!
<!DOCTYPE HTML>
<html lang="pl"/>
<head>
<meta charset="utf-8"/>
<title>Serwis pomocy technicznej</title>
<meta name="description" content="Tu dowiesz się gdzie i jak szukać pomocy technicznej."/>
<meta name="keywords" content="serwis, telefony, laptopy, komputery, sprzęt AGD, pomoc"/>
<meta http-equiv="X-UA-Compatibile" content="IE=edge, chrome=1"/>
<meta name="author" content="Aneta Nowak"/>
<style>
#container
{
width: 1362px;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: #CC66FF;
padding: 15px;
}
#opcja1
{
width: 454px;
float: left;
background-color: #999999;
}
#opcja2
{
width: 454px;
float: left;
background-color: #666666;
}
#opcja3
{
width: 454px;
float: left;
background-color: #808080;
}
#pusty1
{
clear: both;
}
#instrukcja1
{
width: 888px;
float: left;
padding: 10px;
}
#instrukcja2
{
width: 434px;
float: left;
background-color: #CCCCCC;
padding: 10px;
}
#pusty2
{
clear: both;
}
#logo
{
float: left;
width: 500px;
padding: 10px;
}
#opis
{
width: 1112px;
padding: 10px;
float: left;
}
#footer
{
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 align="center">Szukasz pomocy technicznej?</h1>
</div>
<div id="opcja1">
<h3 align="center">Mam problem z komputerem</h3>
</div>
<div id="opcja2">
<h3 align="center">Mam problem z smartfonem</h3>
</div>
<div id="opcja3">
<h3 align="center">Mam problem ze sprzętem AGD</h3>
</div>
<div id="pusty1">
</div>
<div id="instrukcja1">
<h4 align="center">Skontaktuj się z naszymi doradcami specjalizującymi się w obsłudze serwisowej komputerów, laptopów i smartfonów pod numerem telefonu 666 666 666 lub adresem e-mail adres@poczta.pl. Jesteśmy dostępni 24h na dobę, 7 dni w tygodniu.</h4>
</div>
<div id="instrukcja2">
<h4 align="center">Przejdź do strony zaprzyjaźnionego serwisu AGD klikając <a href="http://milenium-agd.pl/" target="_blank" title="Przejdź do dedykowanego serwisu AGD">TUTAJ</a>.</h4>
<div id="pusty2">
</div>
<div id="logo">
<a href="https://www.facebook.com/serwis.techniczny.3" target="_blank" title="Zobacz naszą stronę na Facebooku"><img src="img/logo.jpg"/></a>
</div>
<div id="opis">
Jesteśmy zespołem osób, który współpracuje z wieloma serwisami i scala ich usługi, aby zapełnić kompleksową obsługę naszym klientom.
</div>
<div id="footer">
Zespół techniczny © Wszelkie prawa zatrzeżone
</div>
</div>
</body>
</html>
#container
{
width: 1362px;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: #CC66FF;
padding: 15px;
}
#opcja1
{
width: 454px;
float: left;
background-color: #999999;
}
#opcja2
{
width: 454px;
float: left;
background-color: #666666;
}
#opcja3
{
width: 454px;
float: left;
background-color: #808080;
}
#pusty1
{
clear: both;
}
#instrukcja1
{
width: 888px;
float: left;
padding: 10px;
}
#instrukcja2
{
width: 434px;
float: left;
background-color: #CCCCCC;
padding: 10px;
}
#pusty2
{
clear: both;
}
#logo
{
float: left;
width: 500px;
padding: 10px;
}
#opis
{
width: 1112px;
padding: 10px;
float: left;
}
#footer
{
clear: both;
}