Dzień Dobry,
Mam problem z aside id="right" Nie jest po prawej stronie witryny za to jest "przyklejony" do artykułu (lorem ipsum) po prawej. Proszę napisać mi jak to naprawić. (CSS jest pomiędzy tagami style)
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Firma</title>
<meta charset="utf-8">
<meta name="description" content="Szablon strony firmy!"/>
<meta name="keywords" content="nowa strona, firma"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body
{
background-color: #B5B5A3;
font-family: 'Slabo 27px';
letter-spacing: 2px;
}
#container
{
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#title
{
width: 100%;
height: 20%;
background-color: #998877;
text-align: center;
font-size: 50px;
padding: 10px;
color:#AAAA99;
}
nav
{
width: 100%;
height: 10%;
text-align: center;
font-size: 50px;
padding: 10px;
background-color: #887766;
color:#AAAA99;
}
ul
{
list-style-type: none;
padding: 1px;
font-size: 20px;
height: 5%;
text-align: center;
display: inline-block;
letter-spacing: 2px;
}
ul>li
{
border-right: 2px #555555 dotted;
float: left;
padding: 10px;
height: 5%;
margin-right: 10px;
}
ul>li:first-child
{
border-left: 2px #555555 dotted;
}
ul>li:hover
{
background-color: #aa9988;
}
#left
{
width:10%;
background-color: #776655;
height:800px;
padding: 10px;
margin-right:20px;
float: left;
display: inline-block;
}
article
{
float: left;
text-align: justify;
font-family: 'Slabo 27px', serif;
width: 590px;
}
.ad
{
padding: 5px;
height:400px;
}
#right
{
width:10%;
background-color: #776655;
height:800px;
padding: 10px;
margin-right: 0px;
margin-left: 2px;
display: inline-block;
}
.socials
{
float: left;
display: inline-block;
width: 100px;
}
#yt
{
background-color: #ee4400;
height:100px;
}
#yt:hover
{
background-color: #dd3300;
}
</style>
</head>
<body>
<div id="container">
<main>
<header>
<div id="title">[nazwa firmy]</div>
<nav>
<ul>
<li>Strona Główna</li>
<li>Sklep</li>
<li>Kontakt</li>
<li>O firmie</li>
</ul>
</nav>
</div>
</header>
<aside id="left">
<div class="ad"></div>
<div class="ad"></div>
</aside>
<section>
<article>Lorem ipsum dolor. Sit amet adipiscing arcu est sed. Dui ante wisi. Laoreet ut nunc tristique dui ac volutpat praesent integer in ipsum diam. Consequatur urna felis egestas quisque qui. In sem nunc. Blandit non duis mattis dolor tincidunt morbi.
<p>Accumsan adipiscing montes. Proin dolor faucibus ut amet magna felis nullam sociis tempus adipiscing nunc. Aut gravida integer. Mus non ut. Volutpat ligula aenean suscipit faucibus sit. Aliquam est placerat luctus nullam molestie. Fermentum amet condimentum. Rhoncus sed fusce dictum nullam nunc. Eu lacus consequat. Faucibus elit nibh. Elit integer laoreet. Morbi quam lectus convallis maecenas justo enim blandit aliquet nec ante arcu sed vitae potenti id vulputate ante. Purus eros eros ac mus mattis. Imperdiet adipiscing arcu interdum mi.</p>
<p>Imperdiet ac at nunc vehicula sed pellentesque illo lectus sit phasellus eu. Non aliquam nam. Vestibulum etiam sapien. Tellus sem sit. Mi vel wisi. At morbi venenatis hendrerit magna leo. Nulla eros arcu ultricies felis id. Sit suscipit venenatis penatibus dui quisque. Leo duis orci. Neque pellentesque sed. Adipiscing ipsum duis. Ultrices nonummy luctus dolor porttitor commodo. Volutpat orci pretium amet tempus amet. Culpa mauris lobortis pellentesque lorem suspendisse eget morbi metus amet vel quis mattis nulla porttitor. Quia sed nisl. Turpis tristique lectus. Habitasse sapien sociosqu aliquam eros tortor. Placerat maecenas suspendisse elit ipsum tempus nam est donec tortor integer lacus. Sed dui faucibus. Tempor magnis praesent eros nam pellentesque at consequat nesciunt. Eget eget nunc felis eget ut id eleifend lectus aliquam massa pharetra quis erat at consequat sed curabitur aliquam rhoncus nonummy. Sapien velit consequat morbi mi neque. Vel maecenas vulputate. Risus quam luctus amet tristique turpis. Ut odio non. Erat nulla nulla. Ut nunc quisque integer tristique amet. Consectetuer erat ut et vestibulum justo. Felis litora rutrum suspendisse lacus vulputate. Ultrices enim ullamcorper augue et lorem. </p>
</article>
</main>
<footer>
<div class="socials">
<div id="fb"></div>
</div>
</footer>
</section>
<aside id="right"></aside>
</div>
</body>
</html>
