Buenas:
Tengo un div en la parte derecha de mi web, el problema es que cuando lo coloque estaba en la parte baja izquierda, con un float y un position relative lo mande a su lugar, pero el espacio que ocupaba antes de posicionarlo no desaparecio. Siento no haberme explicado bien, pero es un poco complicado. Os dejo el trozo de codigo de html y el de css. Ademas inserto una imagen para que veais que me aparece a la derecha un scroll para desplazar la pagina.
Tengo un div en la parte derecha de mi web, el problema es que cuando lo coloque estaba en la parte baja izquierda, con un float y un position relative lo mande a su lugar, pero el espacio que ocupaba antes de posicionarlo no desaparecio. Siento no haberme explicado bien, pero es un poco complicado. Os dejo el trozo de codigo de html y el de css. Ademas inserto una imagen para que veais que me aparece a la derecha un scroll para desplazar la pagina.
[COLOR="#0000FF"]<!DOCTYPE html>
<html>
<head>
<title>Gruas Copa</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="javascript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<!-- Gruas Copa Titulo -->
<header>
<div id="gruas">
<span class="letra1">G</span>
<span class="letra2">R</span>
<span class="letra1">U</span>
<span class="letra2">A</span>
<span class="letra1">S</span>
</div>
<div id="copa">
<span class="letra1">C</span>
<span class="letra2">O</span>
<span class="letra1">P</span>
<span class="letra2">A</span>
</div>
</header>
<!-- Menu Horizontal -->
<nav id="nav-1">
<a class="link-1" href="#" alt="Gruas">Home</a>
<a class="link-1" href="#" alt="Serviços Gruas">Serviços</a>
<a class="link-1" href="#" alt="Produtos Gruas">Produtos</a>
<a class="link-1" href="#" alt="Empresa Gruas">Empresa</a>
<a class="link-1" href="#" alt="Contato Gruas">Contato</a>
</nav>
<!-- Menu Vertical -->
<nav id="nav-2">
<div class="pos">
<p class="nv"><a class="link-2" href="#" alt=" Gruas">Home</a><p>
<p class="nv"><a class="link-2" href="#" alt="Serviços Gruas">Serviços</a></p>
<p class="nv"><a class="link-2" href="#" alt="Produtos Gruas">Produtos</a></p>
<p class="nv"><a class="link-2" href="#" alt="Empresa Gruas">Empresa</a></p>
<p class="nv"><a class="link-2" href="#" alt="Contato Gruas">Contato</a></p>
</div>
</nav>
<!-- Textos de la web -->
<div id="fondo_texto">
<div id="texto">
<img src="imagenes/grua7.1.jpg" id="imagen"></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenunc, consequat massa
</div>
</div>
<!-- Noticias de la web -->
<div id="noticias">
Noticias
<div id="noticias_texto">
Noticia 1
</div>
</div>
</body>
</html>[/COLOR][COLOR="#0000FF"]body {
background-color: #004E77;
height: 100px;
}
/* Titulo Gruas Copa */
#gruas {
position: relative; top: ;
float: left;
position: relative; left: 20px; bottom: 3px;
}
#copa {
position: relative; top: ;
float: right;
position: relative; right: 20px; bottom: 3px;
}
.letra1 {
font-size: 70px;
color: #FF0000;
font-family: Georgia;
}
.letra2 {
font-size: 70px;
color: #000000;
font-family: Georgia;
}
/* Menu Horizontal */
nav {
margin-top: 50px;
padding: 24px;
text-align: center;
box-shadow: 2px 2px 8px -1px #000000;
}
#nav-1 {
background: #3fa46a;
}
.link-1 {
transition: 0.3s ease; /*Crea la animacion del menu*/
background: #3fa46a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 4px solid #3fa46a; /*Coloca bordes para la animacion*/
border-bottom: 4px solid #3fa46a; /*Coloca bordes para la animacion*/
padding: 20px 0; /*Declara la separacion de los bordes con los nombres*/
margin: 0 20px; /*Declara la separacion de las palabras con el nombre*/
}
.link-1:hover {
border-top: 4px solid #ffffff;
border-bottom: 4px solid #ffffff;
padding: 6px 0;
}
/* Menu Vertical */
#nav-2 {
background: #3fa46a;
padding: 20px; /*Tamaño del menu*/
width: 100px;
position: fixed;
border-radius: 2px;
}
.pos {
position: relative; right: 8px;
}
.nv {
padding: 1.1mm; /*Es Necesario para verse la animacion*/
}
.link-2 {
transition: 0.3s ease; /*Crea la animacion del menu*/
background: #3fa46a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 4px solid #3fa46a; /*Coloca bordes para la animacion*/
border-bottom: 4px solid #3fa46a; /*Coloca bordes para la animacion*/
padding: 10px 0; /*Declara la separacion de los bordes con los nombres*/
margin: 0 20px; /*Declara la separacion de las palabras con el nombre*/
}
.link-2:hover {
border-top: 4px solid #ffffff;
border-bottom: 4px solid #ffffff;
padding: 4px 0;
}
/* Textos de la web */
#imagen {
float: right;
position: relative; left: 7px; top: 5px;
}
#fondo_texto {
background-color: #FFFFFF;
border-style: solid;
border-radius: 5px;
border-color: #444444;
width: 650px; height: 500px;
overflow-y: auto; /* propiedad que inserta una barra en caso de texto excesivo */
margin: 0 auto;
position: relative; top: 50px;
}
#texto {
width: 95%;
margin: 0 auto; padding: 0px 5px;
position: relative; top: 5px;
color: #000000;
font-size: 20px ;
text-align: justify;
}
/* Noticias de la web */
#noticias {
background-color: #3fa46a;
width: 200px; height: 350px;
float: right;
position: relative; bottom: 456px;
box-shadow: 2px 2px 10px #000000;
text-align: center; font-weight: bold;
}
#noticias_texto {
}[/COLOR]