I'm not able to position my footer, other than that it's accompanying my widget. how can I position it correctly?
codes below:
body {
margin: 0;
padding: 0;
font-family: helvetica;
font-size: 12px;
}
.topo {
height: 30px;
background-color: #303030;
}
.topoint {
width: 100%;
max-width: 1040px;
height: 30px;
margin: auto;
}
.topoleft {
width: 50%;
height: 30px;
float: left;
}
.toporight {
width: 50%;
height: 28px;
float: right;
text-align: right;
margin-top: 2px;
}
.topoleft ul {
margin: 0;
padding: 0;
list-style: none;
}
.topoleft li {
float: left;
height: 30px;
line-height: 30px;
margin-left: 8px;
margin-right: 8px;
}
.topoleft li a {
text-decoration: none;
color: #FFF;
}
.topoleft li .ativo {
color: blue;
}
.topobusca {
width: 110px;
height: 26px;
outline: 0;
}
.toporight a {
float: right;
}
.toporight input {
float: right;
}
.toporight img {
margin-right: 4px;
}
.topo2 {
height: 95px;
}
.topo2int {
width: 100%;
max-width: 1040px;
height: 95px;
margin: auto;
}
.logo {
width: 230px;
height: 65px;
float: left;
margin-top: 30px;
}
.topo2 .banner {
width: 650px;
height: 80px;
float: right;
margin-top: 7px;
background-color: #ff0000;
font-size: 40px;
color: #fff;
line-height: 80px;
text-align: center;
font-family: Helvetica;
}
.menu {
height: 40px;
background-color: #ff0000;
}
.menuint {
width: 100%;
max-width: 1040px;
height: 40px;
margin: auto;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}
.menu li {
float: left;
height: 40px;
line-height: 40px;
padding-left: 8px;
padding-right: 8px;
}
.menu li:hover .submenu {
display: block;
}
.menu a {
color: #fff;
text-decoration: none;
}
.submenu {
width: 140px;
position: absolute;
background-color: #ff0000;
display: none;
}
.submenuitem {
width: 140px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.submenuitem:hover {
background-color: #ff5555;
width: 130px;
}
.ultimasnoticias {
height: 40px;
}
.ultimasnoticiasint {
width: 100%;
max-width: 1040px;
height: 40px;
margin: auto;
}
.ultnoticiasarea {
height: 28px;
background-color: #fff;
border: 1px solid #ccc;
margin-top: 10px;
border-radius: 2px;
}
.ultnoticiastitulo {
background-color: #ff0000;
color: #fff;
height: 28px;
line-height: 28px;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-size: 16px;
}
.ultnoticiasnoticia {
color: #000;
height: 28px;
line-height: 28px;
display: inline-block;
padding-left: 10px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.containerint {
width: 100%;
max-width: 1040px;
margin: auto;
}
.leftside {
width: 750px;
float: left;
}
.rightside {
width: 278px;
min-height: 300px;
float: right;
margin-left: 12px;
}
.widget {
border: 1px solid #ccc;
background-color: #fff;
margin-bottom: 10px;
border-radius: 2px;
}
.widget_titulo {
height: 30px;
line-height: 30px;
background-color: #ddd;
border-bottom: 1px solid #ccc;
padding-left: 5px;
font-size: 14px;
}
.widget_conteudo {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.noticia_item {
font-size: 14px;
margin: 0px 10px;
padding: 10px 0px;
text-align: left;
border-bottom: 1px solid #ccc;
}
.noticia_item a {
text-decoration: none;
color: #000;
}
.slideshow {
height: 335px;
overflow: hidden;
margin-bottom: 20px;
}
.slideshow_area {
width: 10000px;
height: 335px;
transition: all 1s;
}
.slide {
height: 335px;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slide img {
height: 335px;
width: 750px;
}
.slideinfo {
position: relative;
top: -70px;
height: 70px;
background-image: url('../images/slideshow_bg.png');
background-size: auto 70px;
z-index: 10000;
}
.slideinfo_titulo {
font-size: 20px;
color: #fff;
padding-top: 20px;
margin-left: 20px;
}
.slideinfo_subtitulo {
font-size: 13px;
margin-left: 20px;
color: #fff;
}
.bolls {
position: absolute;
width: 200px;
height: 15px;
margin-left: 10px;
padding-top: 10px;
}
.boll {
width: 15px;
height: 15px;
float: left;
margin-right: 5px;
cursor: pointer;
background-color: #d0d1cc;
border-radius: 10px;
}
.noticiaarea1 {
width: 420px;
height: 420px;
float: left;
}
.noticiaitem1 {
height: 220px;
}
.noticia_image {
width: 390px;
height: 220px;
float: left;
padding: 3px;
border: 1px solid #ccc;
margin-top: 4px;
margin-left: 15px;
}
.texto_descritivo {
font-size: 30px;
width: 390px;
text-align: left;
margin-left: 15px;
}
.texto_subdescritivo {
color: #ccc;
font-size: 12px;
text-align: left;
margin-left: 15px;
}
.noticiaarea2 {
width: 310px;
height: 420px;
float: right;
}
.clear {
clear: both;
}
.noticiaitem {
text-align: left;
height: 88px;
margin-bottom: 14px;
}
.noticia_img {
width: 80px;
height: 80px;
border: 1px solid #ccc;
padding: 3px;
margin-top: 4px;
float: left;
}
.noticiatitulo {
float: left;
margin-left: 5px;
margin-top: 4px;
font-size: 16px;
width: 216px;
}
.noticiainfo {
float: left;
margin-left: 5px;
margin-top: 4px;
color: #999;
width: 216px;
}
.footer {
height: 50px;
}
.footerint {
width: 100%;
max-width: 1040px;
height: 50px;
margin: auto;
background-color: #ff0000;
}<html>
<head>
<title>Html Portal</title>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/script.js"></script>
</head>
<body>
<div class="topo">
<div class="topoint">
<div class="topoleft">
<ul>
<li><a href="./" class="ativo"> Home<a/></li>
<li><a href="Quem somos">Quem Somos<a/></li>
<li><a href="Anuncie aqui">Anuncie Aqui<a/></li>
<li><a href="Contato">Contato<a/></li>
</ul>
</div>
<div class="toporight">
<input type="image" border="0" src="assets/images/lupabranca.png" width="26" height="26" >
<input type="text" name="busca" class="topobusca" placeholder="Busca..." >
<a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
</div>
</div>
</div>
<div class="topo2">
<div class="topo2int">
<div class="logo">
<img src="assets/images/logo.jpg" border="0" width="230" />
</div>
<div class="banner">
PUBLICIDADE 80 X 650
</div>
</div>
</div>
<div class="menu">
<div class="menuint">
<ul>
<li><a href="./" class="ativo">Home<a/></li>
<li><a href="./" >Economia<a/></li>
<li>
<a href="./" >Entretenimento<a/>
<img src="assets/images/arrowdown.png" border="0" width="10"/>
<div class="submenu">
<a href="./"><div class="submenuitem">submenu1</div></a>
<a href="./">
<div class="submenuitem">submenu2</div>
</a>
<a href="./">
<div class="submenuitem">submenu3</div>
</a>
<a href="./">
<div class="submenuitem">submenu4</div>
</a>
<a href="./">
<div class="submenuitem">submenu5</div>
</a>
</div>
</li>
<li>
<a href="./">Esportes<a/>
<img src="assets/images/arrowdown.png" border="0" width="10">
<div class="submenu">
<a href="./"><div class="submenuitem">submenu1</div></a>
<a href="./">
<div class="submenuitem">submenu2</div>
</a>
<a href="./">
<div class="submenuitem">submenu3</div>
</a>
</div>
</li>
<li><a href="./">Geral<a/></li>
<li>
<a href="./" >Notícias<a/>
<img src="assets/images/arrowdown.png" border="0" width="10">
<div class="submenu">
<a href="./"><div class="submenuitem">submenu1</div></a>
<a href="./">
<div class="submenuitem">submenu2</div>
</a>
<a href="./">
<div class="submenuitem">submenu3</div>
</a>
<a href="./">
<div class="submenuitem">submenu4</div>
</a>
</div>
</li>
<li><a href="./">policia<a/></li>
<li><a href="./" >Videos<a/></li>
</ul>
</div>
</div>
<div class="ultimasnoticias">
<div class="ultimasnoticiasint">
<div class="ultnoticiasarea">
<div class="ultnoticiastitulo">ÚLTIMAS NOTÍCIAS</div>
<div class="ultnoticiasnoticia">Alguma nótícia de algum texto que vai aparecer aqui...</div>
</div>
</div>
</div>
<div class="container">
<div class="containerint">
<div class="leftside">
<div class="slideshow" id="slideshow">
<div class="bolls">
<div class="boll" onclick="mudarSlide(0)"></div>
<div class="boll" onclick="mudarSlide(1)"></div>
<div class="boll" onclick="mudarSlide(2)"></div>
<div class="boll" onclick="mudarSlide(3)"></div>
</div>
<div class="slideshow_area">
<a href="http://br.ufc.com/">
<div class="slide">
<img src="assets/images/ufc.jpg">
<div class="slideinfo">
<div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
<div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
</div>
</div>
</a>
<a href="http://sicnoticias.sapo.pt/">
<div class="slide">
<img src="assets/images/jornal.jpg">
<div class="slideinfo">
<div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
<div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
</div>
</div>
</a>
<a href="https://www.nfl.com/">
<div class="slide">
<img src="assets/images/nfl.jpg">
<div class="slideinfo">
<div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
<div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
</div>
</div>
</a>
<a href="http://www.uefa.com/uefachampionsleague/index.html">
<div class="slide">
<img src="assets/images/champions.jpg">
<div class="slideinfo">
<div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
<div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
</div>
</div>
</a>
</div>
</div>
<div class="widget">
<div class="widget_titulo">NOTÍCIAS</div>
<div class="widget_conteudo">
<div class="noticiaarea1">
<div class="noticiaitem1">
<div class="noticia_image">
<img src="assets/images/quadrilha.jpg" border="0" width="390" height="220">
</div>
<div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa iagem</div>
<div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
</div>
</div>
<div class="noticiaarea2">
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/jogo.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/rihanna.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/vint Cerf.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="widget">
<div class="widget_titulo">NOTÍCIAS RECENTES</div>
<div class="widget_conteudo">
<div class="noticiaarea1">
<div class="noticiaitem1">
<div class="noticia_image">
<img src="assets/images/empresa.jpg" border="0" width="390" height="220">
</div>
<div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa iagem</div>
<div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
</div>
</div>
<div class="noticiaarea2">
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/escritorio.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/paisagem.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
<div class="noticiaitem">
<div class="noticia_img">
<img src="assets/images/carro.jpg" border="0" width="80" height="80">
</div>
<div class="noticiatitulo">Algum titulo qualquer</div>
<div class="noticiainfo">500 comentários</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<footer>
<div class="footer"></div>
<div class="footerint"></div>
</footer>
</div>
<div class="rightside">
<div class="widget">
<div class="widget_titulo">SOCIAL</div>
<div class="widget_conteudo">
<a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
<a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
</div>
</div>
<div class="widget">
<div class="widget_titulo">ULTIMAS NOTÍCIAS</div>
<div class="widget_conteudo">
<div class="noticia_item">
<a href="./">Alguma notícia de algum site que vai
aparecer nesta parte do portal para exemplificar.<a/>
</div>
<div class="noticia_item">
<a href="./">Alguma notícia de algum site que vai
aparecer nesta parte do portal para exemplificar.<a/>
</div>
<div class="noticia_item">
<a href="./">Alguma notícia de algum site que vai
aparecer nesta parte do portal para exemplificar.<a/>
</div>
<div class="noticia_item">
<a href="./">Alguma notícia de algum site que vai
aparecer nesta parte do portal para exemplificar.<a/>
</div>
<div class="noticia_item">
<a href="./">Alguma notícia de algum site que vai
aparecer nesta parte do portal para exemplificar.<a/>
</div>
</div>
</div>
<div class="widget">
<div class="widget_titulo">PUBLICIDADADE</div>
<div class="widget_conteudo">
<img src="assets/images/girl.jpg" border="0" width="275" >
</div>
</div>
<div class="widget">
<div class="widget_titulo">ENCONTRE-NOS NO FACEBOOK</div>
<div class="widget_conteudo">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs&width=275&height=121&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"width="275" height="121" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>