Sucede que quiero que ese pequeño recuadro de puntos vaya al lado derecho, intenté usar la propiedad "float: right;" y pues nada, creo que la estoy poniendo mal, debido a que no me funciona y no me logra posicionar, sé que hice bien la estructura, en caso de que la haya hecho mal, corregirme, pero pues solamente quiero solución a mi problema, ya que me enfoqué bien en colocar bien los divs.
Código HTML:
. escribió:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de fondos con HTML5 y CSS3</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/fondos_style.css">
</head>
<body>
<div id="superior">
<header><h1>Probando diferentes fondos y sus posicionamentos con la propiedad "float"</h1></header>
</div>
<div id="menu-superior">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Acerca de nosotros</a></li>
</ul>
</nav>
</div>
<div id="contenido">
<section>
<div id="contenido-derecho">
<article>
<p>Con esta Tabla de colores HTML dinámica puede conseguir códigos HTML para los colores básicos. Haga clic en cualquier cuadro de color para conseguir su Código de color HTML. A continuación hay una lista de los colores seleccionados recientemente. Para guardar un color HTML para una próxima visita haga clic en su chincheta.</p>
</article>
</div>
<article id="texto">
<p>El sitio web Códigos de colores HTML le proporciona herramientas gratuitas de colores para encontrar colores HTML para su sitio web. Las excelentes herramientas Tabla de colores HTML y Selector de colores HTML harán que esta tarea sea pan comido.</p><p>Para empezar rápidamente a usar Colores HTML en su sitio web, échele un vistazo a ¿Cómo usar los códigos de colores HTML?. Si desea aprender qué significa realmente esta combinación de caracteres en Códigos de colores HTML échele un vistazo a la sección Teoría sobre los códigos de colores HTML.</p>
<p>Colores seguros para la Web es la lista de colores que se ven igual en todos los sistemas operativos. Si es daltónico consulte los Nombres de colores HTML para superar ese problema.</p>
</article>
</section>
</div>
</body>
</html>
<html>
<head>
<title>Prueba de fondos con HTML5 y CSS3</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/fondos_style.css">
</head>
<body>
<div id="superior">
<header><h1>Probando diferentes fondos y sus posicionamentos con la propiedad "float"</h1></header>
</div>
<div id="menu-superior">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Acerca de nosotros</a></li>
</ul>
</nav>
</div>
<div id="contenido">
<section>
<div id="contenido-derecho">
<article>
<p>Con esta Tabla de colores HTML dinámica puede conseguir códigos HTML para los colores básicos. Haga clic en cualquier cuadro de color para conseguir su Código de color HTML. A continuación hay una lista de los colores seleccionados recientemente. Para guardar un color HTML para una próxima visita haga clic en su chincheta.</p>
</article>
</div>
<article id="texto">
<p>El sitio web Códigos de colores HTML le proporciona herramientas gratuitas de colores para encontrar colores HTML para su sitio web. Las excelentes herramientas Tabla de colores HTML y Selector de colores HTML harán que esta tarea sea pan comido.</p><p>Para empezar rápidamente a usar Colores HTML en su sitio web, échele un vistazo a ¿Cómo usar los códigos de colores HTML?. Si desea aprender qué significa realmente esta combinación de caracteres en Códigos de colores HTML échele un vistazo a la sección Teoría sobre los códigos de colores HTML.</p>
<p>Colores seguros para la Web es la lista de colores que se ven igual en todos los sistemas operativos. Si es daltónico consulte los Nombres de colores HTML para superar ese problema.</p>
</article>
</section>
</div>
</body>
</html>
Código CSS
. escribió:
html /* Fondo */
{
background-color: #CCC;
width: 900px;
margin: auto;
}
h1
{
font-size: 25px;
}
div#superior /* Encabezado */
{
background-color: #1BDDEE;
border: 2px solid black;
text-align: center;
}
/* Menú superior */
div#menu-superior
{
background-color: #DE9D9D;
border: 2px solid black;
margin-top: 5px;
text-align: center;
}
div#menu-superior ul li
{
display: inline-block;
}
div#menu-superior ul li:hover
{
background-color: black;
}
div#menu-superior ul li a
{
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
padding: 0 35px;
}
/* Menú superior */
/* Contenido general */
div#contenido
{
background-color: #4DA929;
border: 2px solid black;
margin-top: 5px;
}
div#contenido section article#texto p
{
font-family: Arial;
font-size: 18px;
padding: 0 8px 0 15px;
}
/* Contenido general */
/* Contenido derecho*/
div#contenido section div#contenido-derecho
{
border: 2px dotted black;
font-family: Arial;
font-size: 12px;
float: right;
margin: 0 12px;
padding: 0 3px 0 5px;
}
/* Contenido derecho*/
{
background-color: #CCC;
width: 900px;
margin: auto;
}
h1
{
font-size: 25px;
}
div#superior /* Encabezado */
{
background-color: #1BDDEE;
border: 2px solid black;
text-align: center;
}
/* Menú superior */
div#menu-superior
{
background-color: #DE9D9D;
border: 2px solid black;
margin-top: 5px;
text-align: center;
}
div#menu-superior ul li
{
display: inline-block;
}
div#menu-superior ul li:hover
{
background-color: black;
}
div#menu-superior ul li a
{
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
padding: 0 35px;
}
/* Menú superior */
/* Contenido general */
div#contenido
{
background-color: #4DA929;
border: 2px solid black;
margin-top: 5px;
}
div#contenido section article#texto p
{
font-family: Arial;
font-size: 18px;
padding: 0 8px 0 15px;
}
/* Contenido general */
/* Contenido derecho*/
div#contenido section div#contenido-derecho
{
border: 2px dotted black;
font-family: Arial;
font-size: 12px;
float: right;
margin: 0 12px;
padding: 0 3px 0 5px;
}
/* Contenido derecho*/
