Witam,
Dla poniższego kodu html zdjęcia w przeglądarce wyświetlają się jedno pod drugim, zamiast jedno obok drugiego.
Niniejszy kod:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Znani matematycy</title>
<meta name="description" content="Biografie i sylwetki znanych matematyków" />
<meta name="keywords" content="matematyka, matematyk, biografie" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="styl.css" type="text/css"/>
<style>
#box
{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#nagłówek
{
text-align: center;
align:center;
background-color:black;
color:white;
padding: 10px;
}
#L.E.
{
float: left;
width:250px;
min-height: 300px;
padding:10px;
}
#J.N.
{
float: left;
width:250px;
min-height: 300px;
padding:10px;
}
#S.B.
{
float: left;
width:250px;
min-height: 300px;
padding:10px;
}
#H.S.
{
float: left;
width:250px;
min-height: 300px;
padding:10px;
}
#stopka
{
clear: both;
width:1200px;
background-color: black;
color: white;
text-align: center;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<div id="nagłówek">
<h1>Znani matematycy</h1>
Biografie, życiorysy, sylwetki
</div>
<br/><br/><br/>
<div id="L.E.">
<img width="219" height="283" src="images/Leonhard_Euler.jpg"/><br/>
<a href="https://pl.wikipedia.org/wiki/Leonhard_Euler" title="Zobacz na Wikipedii!" target="_blank">Leonhard Euler(1707-1783)</a>
</div>
<br/><br/><br/>
<div id="J.N.">
<img width="250" height="166" src="images/John_Forbes_Nash,_Jr..jpg"/><br/>
<a href="https://pl.wikipedia.org/wiki/John_Forbes_Nash" title="Zobacz na Wikipedii!" target="_blank">John Nash(1928-2015)</a>
</div>
<br/><br/><br/>
<div id="S.B.">
<img width="174" height="240" src="images/Stefan_Banach.jpg"/><br/>
<a href="https://pl.wikipedia.org/wiki/Stefan_Banach" title="Zobacz na Wikipedii!" target="_blank">Stefan Banach(1892-1945)</a>
</div>
<br/><br/><br/>
<div id="stopka">Znani matematycy © Wszelkie prawa zastrzeżone</div>
</div>
</body>
</html>
Plik styl.css:
body
{
background-color: lightgray;
}
a:link
{
color:blue;
}
a:visited
{
color:blue;
}
a:hover
{
color:red;
}
h1
{
font-size: 50px;
}
Pytanie: dlaczego float: left; nie działa?