Pessoal, estou com um problema com o FLOAT. No exercício pede para colocarmos a imagem e o aside do lado direito da página. Utilizei o float para colocar essas duas tags do lado direito, ok, sem problemas. a página esta com width: 720px; quando coloco o float left no MAIN (conforme código abaixo) o width "some" e o texto vai todo para a esquerda, o aside e a img ficam ok (lado direito), mas o width não deveria sumir. Por que ele "zera"?
div{
width: 720px;
}
main{
float: left;
}
aside, img{
border-bottom: 10px solid #000000;
border-left: 10px solid #000000;
float: right;
}
**Segue HTML
<body>
<main class="main">
<h1>Sobre mim</h1>
<div class="divprincipal">
<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>
<h2>Como trabalho</h2>
<blockquote class="trabalho">
<p>Excelente profissional. Competente e muito focado nos resultados com qualidades ao usuário</p>
<cite> Pedro Carlos</cite>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
<p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>
<h2>Experiência</h2>
<blockquote class="experiencia">
<p>A experiência do João nos ajudou a solucionar diversos problemas no dia-a-dia</p>
<cite>Pedro Paulo</cite>
</blockquote>
<p>Já <a href="portfolio.html">desenvolvi projetos </a>para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://ibm.com">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
<h2>Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="#">blog</a>.</p>
</div>
</main>
<div class="divlado">
<img class= "img" src="eu.jpg" alt="Foto do João da Silva">
<aside class="aside">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<!-- o id = nome serve para dar um nome unico a uma tag -->
<!-- <ul id="iconessociais">-->
<!-- o class = serv para dar um nome para uma categoria que serah usada em varias classes -->
<ul class="iconessociais">
<!-- foi retirado a imagem do html e colocada no css-->
<li><a class="Github" href="http://github.com/joaodasilva">Github</a></li>
<li><a class="Twitter" href="http://twitter.com/joaodasilva">Twitter</a></li>
<li><a class="Linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">Linkedin</a></li>
</ul>
</aside>
</div>
<footer>
<p> © João da Silva - 2014 </p>
</footer>
</body>Desculpa as dúvidas "bestas", mas sou novo aqui e novo com desenv. Web. Coboleiro aqui esta "sofrendo" rs Alguém poderia me explicar onde estou errando?
