float: left; que empurra outro bloco
Oi pessoal, eu tenho uma dúvida sobre a página abaixo, e é sobre o "float: left;". O meu float left tem o poder de empurra o meu bloco chamado content. Exemplo: se eu colocar right no meu float, então e eu consigo empurrar o bloco content para a direita junto com o meu float. Isso acontece porque o bloco onde esta o meu float esta pegando tudo fazendo com que o meu float tenha uma maior precedencia ? Ou é outra coisa ?
CSS:
html {
height: 100%;
text-align: center;
}body {
background-color: #dcdcdc;
margin: 0px auto 20px auto;
font-family: verdana, arial;
font-size: 12px;
color: #999999;
height: 100%;
text-align: center;
}/*
#aaa{
width: 10px;
margin: 0px auto 0px auto;
}*/
.bdiv {
background-image: url(./images/bgy.jpg);
background-repeat: repeat-y;
width: 800px;
margin: 10px auto 50px auto;
}.bdiv img {margin: 0px; display: block; }
div { margin: 0px; }
.content {
margin: 0px 0px 0px 180px;
text-align: left;
width: 535px;
}.links { / AQUI ESTA OS LINKS NO CSS /
width: 160px;
float: left;
margin: 0px 0px 0px 14px;
text-align: left;
}
/*a {
color: #aaaaaa;
letter-spacing: 1.8px;
text-decoration: none;
padding: 0px 2px 0px 2px;
}
*/
/*a:hover {
border-bottom: 1px dotted #aaaaaa;
background-color: #ffffff;
color: #7a6083;
}
*/
/*.links a {
display: block;
margin: 0px 10px 2px 10px;
border-bottom: 1px solid #eeeeee;
padding: 2px;
font-size: 11px;
background-color: #efeeee;
}
*/
/*.links a:hover { background-color: #c8b7ce; color: #eeeeee; border-bottom: 1px dotted #eeeeee; }
*/
/*
.links a:first-letter { color: #cccccc; margin: 0px 1px 0px 2px; }
*/
/*
.ftdiv {
height: 40px;
background-image: url(./images/footer.jpg);
background-repeat: no-repeat;
width: 800px;
text-align: left;
}
*/
/*.ftdiv p {
margin: 0px 70px 0px 185px;
padding: 0px 0px 0px 0px;
color: #777777;
font-size: 10px;
text-align: center;
}
*/
/*.ftdiv a {
background-color: transparent;
letter-spacing: 1.5px;
}
*/
/*.ftdiv a:hover { background-color: #ffffff; }
*/
/*
.content p { margin: 12px 2px 12px 10px; }
*/
/*
h1 {
color: #888888;
font-weight: 100;
font-size: 14px;
background-image: url(./images/h1.jpg);
background-repeat: no-repeat;
height: 40px;
width: 543px;
padding: 11px 0px 0px 5px;
margin: 10px 0px -5px 0px;
text-align: center;
letter-spacing: 3px;
font-family: verdana, arial;
}
*//*
h2 {
text-align: right;
color: #666666;
font-weight: 100;
font-size: 10px;
letter-spacing: 1.5px;
margin: 0px 35px 20px 0px;
}
*/
/*.content img {
margin: 3px;
}
*/
/*h4 {
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #999999;
letter-spacing: 1.5px;
margin: 10px 10px 10px 10px;
font-size: 12px;
font-weight: 100;
color: #7a6083;
}*/
/*
.links div {
background-color: #eeeeee;
margin: 0px 10px 0px 10px;
font-size: 9px;
padding: 2px;
border-bottom: 0px solid #999999;
}
*/
/*.links div a { margin:2px 0px 2px 0px; }
*/
/*
.links p { margin: 2px; }
*/
HTML:
<html>
<head><!--Inicia o titulo do site-->
<title>TITULO DA PAGINA</title>
<!--Termina o titulo do site-->
<link href="style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="hack3rhat3r" />
</head>
<body>
<div class= "bdiv">
<div><img src= "./images/banner_01.jpg" height= "29" alt= ""/>
<img src= "./images/banner_02.jpg" height= "29" alt= "" />
<img src= "./images/banner_03.jpg" height= "33" alt= "" />
<img src= "./images/banner_04.jpg" height= "30" alt= "" />
<img src= "./images/banner_05.jpg" height= "32" alt= "" />
<img src= "./images/banner_06.jpg" height= "43" alt= "" /></div>
<div class= "links"> /* LINKS COMEÇAM AQUI */
<div class= "content"> /* CONTENT COMEÇA AQUI !! */
<h1>About The Design</h1>
<p><img src= "./images/avi.jpg" style= "float: left;" alt= "" />balbalbalblablalblalblab</p>
<p>I <a href= "#">enjoyed</a> balbalbalblablalblalblab</p>
<h2>balbalbalblablalblalblab</h2>
<h1>balbalbalblablalblalblab</h1>
<p>balbalbalblablalblalblab.</p>
<p>balbalbalblablalblalblab.</p>
<p>balbalbalblablalblalblab</p>
<h2>balbalbalblablalblalblab</h2>
</div> /* CONTENT TERMINA AQUI !! */
<h4>Update</h4>
<div><p>balbalbalblablalblalblab </p>
<a href= "#">xbalbalbalblablalblalblab..</a>
</div>
<h4>balbalbalblablalblalblab</h4>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<h4>balbalbalblablalblalblab</h4>
<a href= "#">~balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
</div>/* LINKS TERMINAM AQUI */
</div>
</body>
</html>Obrigado pela paciência sou iniciante :thumbsup:
Discussão (1)
Carregando comentários...