Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

danilorlima

layout com colunas

Por , em Desenvolvimento frontend

Recommended Posts

danilorlima    0

danilorlima
Postado

Olá, estou tentando fazer um layout com topo 2 colunas e um rodape , mas quando faço um float dentro da 2ª coluna ele vai para o div da coluna de navegação, mas gostaria que o destaque ficasse abaixo do div com a foto sem prejudicar o texto, segue código para melhor entendimento:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
[url="http-~~-//december.com/html/4/element/html.html"]<html>[/url]
  [url="http-~~-//december.com/html/4/element/head.html"]<head>[/url]
  [url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] http-equiv="content-type" content="text/html; charset=windows-1250">
  [url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="generator" content="PSPad editor, www.pspad.com">
  [url="http-~~-//december.com/html/4/element/title.html"]<title>[/url]</title>
  
  [url="http-~~-//december.com/html/4/element/style.html"]<style[/url] type="text/css">

* {
  
  margin: 0px;
  padding: 0px;

}

  
#topo {
  background-color:gray;
  padding:20px;
}
#menup {
  background-color:#999999;
}
#nav {
  background-color:#666666;
  float:left;
  height:400px;
  width:200px;
}
#cont {
  background-color:#999999;
  margin-left:200px;
}
#rodape {
  background-color:gray;
  clear:both;
}
#foto {
  border:1px solid red;
  float:left;
  height:200px;
  width:200px;
}
#destaque {
  border:1px solid red;
  clear:left;
}


#noticia {
  border:1px solid red;
}


  </style>
  
  </head>
  [url="http-~~-//december.com/html/4/element/body.html"]<body>[/url]
   
   [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="geral">
   
      [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="topo"> topo </div>
      [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="menup">Menu p</div>
      [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="nav">nav</div>
      
      [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="cont">
      
         [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="foto">
         foto
         </div>
         
        [url="http-~~-//december.com/html/4/element/p.html"]<p[/url] id="noticia">Lorem ipsum dolor sit amet consectetuer id a fermentum tellus ut. A montes at vitae adipiscing at id sit Vivamus pretium eu. Vitae porttitor Vestibulum Morbi sed dignissim porta metus In leo quis. Pellentesque malesuada enim id tincidunt adipiscing Curabitur Phasellus laoreet Curabitur montes. Aenean risus Vivamus elit nec et ac sociis eros Ut Phasellus. Nulla id nulla eros libero Ut metus morbi a.

Pellentesque volutpat pretium ut condimentum urna ante orci ante Nam commodo. Interdum Morbi dui metus velit fringilla Sed Sed tortor malesuada ut. Mus metus adipiscing turpis et magna senectus amet aliquam arcu lobortis. Convallis malesuada congue gravida justo risus tincidunt habitant id nec Morbi. Id dignissim orci cursus neque congue nulla velit semper ipsum facilisis. Mi vitae dictumst Integer pede orci elit tortor elit rutrum porttitor. Id non metus.


</p>
         
         [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="destaque">destaque</div>
      </div>
      
      [url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="rodape">rodape</div>
   
   </div>
   
   
  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

amigo danilorlima, antes de mais seja bem vindo Imasters.

Para a próxima coloque seu código dentro do code box.

 

De acordo à sua questão:

 

Altere esta parcela e veja se era isso que queria.

#destaque {
border:1px solid red;
float: left;
width: 100%;
}
Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito