W ramach ćwiczeń postanowiłem zaprojektować prostą stronkę w CSS z darmowymi ebook'ami. Jednak musiałem w którymś momencie coś pokręcić bo div "content" wyświetla mi się pod div'em "menu", mimo uzytego flout: left;
Tutaj HTML:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Ebook4You</title>
<meta name="description" content="Tysiące darmowych ebooków specjalnie dla Ciebie !" />
<meta name="keywords" content="ebbok, free, książk, czytnik" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="ebook.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:700,400&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="box">
<div id="logo">
Ebook4You
</div>
<div id="topbar">
Tysiące darmowych ebook'ów specjalnie dla Ciebie !
</div>
<div id="menu">
<div class="option">Strona główna</div>
<div class="option">Encyklopedia</div>
<div class="option">Pisarze</div>
<div class="option">Gatunki</div>
<div class="option">TOP 10 ebook'ów</div>
<div class="option">Autorzy</div>
<div style="clear: both;"></div>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo dolor, rhoncus sit amet neque dictum, varius volutpat sapien. Donec pharetra, sapien vitae mattis vehicula, ipsum dolor pulvinar ligula, sed semper mi lacus eu dui. Mauris consequat aliquam est a bibendum. Fusce mattis, velit a suscipit congue, ante massa gravida nulla, id venenatis dui ligula sit amet sem. In felis ligula, egestas vel tristique a, ornare porttitor diam. Fusce ac augue nisl. Duis lacus nulla, tristique et efficitur ac, luctus ac ligula. Aliquam mattis mattis enim, sed lobortis sem interdum vel. Sed ornare varius ex, feugiat placerat neque malesuada non. Cras ut est est. Curabitur vitae est lorem. Quisque non condimentum velit, eget tempor justo. Proin quis feugiat est. Duis urna arcu, congue a dui eu, iaculis tincidunt turpis. Mauris euismod, dui a pulvinar maximus, quam elit convallis sem, sed maximus quam augue ac libero. In vitae massa mollis, egestas justo ut, vulputate nisi.</br>
Aliquam dictum tempus metus a placerat. Aliquam pulvinar porta lacinia. Donec rutrum felis quis dapibus cursus. Nam accumsan a sem ut rhoncus. Donec vitae porta augue. Ut mollis risus ut libero pellentesque, nec mollis magna viverra. In vestibulum risus at venenatis pulvinar. Sed nec dapibus ligula. Quisque pulvinar turpis risus, in dictum nisl malesuada non. Vestibulum aliquet, mauris quis fermentum sollicitudin, nibh lacus cursus diam, sit amet mattis ante lectus eget mauris. Duis sed ipsum in ex efficitur sodales. Vivamus eleifend a velit a semper. Aenean id tempus ante, id egestas metus. Duis sit amet magna id neque rhoncus tempor consectetur eget augue.</br>
Suspendisse eget tristique lacus. Pellentesque tincidunt, lectus ac pharetra vehicula, neque felis eleifend magna, a tempor erat neque a est. Suspendisse potenti. Sed sagittis suscipit euismod. Nam fringilla nunc orci, id viverra mauris mollis vel. Ut volutpat ex a efficitur porttitor. In euismod sed ex sed semper. Donec semper, magna mattis interdum fermentum, nisi magna dictum dui, eget dapibus felis dolor sed nibh. Mauris eu ipsum non risus faucibus eleifend at sed ex. Morbi gravida mauris at quam tincidunt vehicula. Etiam convallis lacus at sagittis vulputate.</br>
</div>
<div id="footer">
Darmowe ebooki © Wszelkie prawa zastrzeżone.
</div>
</body>
</html>
A tu CSS:
body
{
background-color: white;
font-family: 'Titillium Web', sans-serif;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: #3AAD34;
font-size: 45px;
font-weight: 700;
letter-spacing: 1px;
}
#topbar
{
background-color: #245E21;
color: white;
padding: 20px;
font-size: 20px;
}
#menu
{
float: left;
background-color: #AFC9AD;
width: 158px;
min-height: 700px;
padding: 10px;
text-align: center;
border-right: 2px dotted black;
}
#content
{
width: 820px;
background-color: #A9D9A9;
min-height: 700px;
text-align: justify;
padding: 20px;
float: left;
}
#footer
{
clean: both;
}