¿Cómo ordeno una caja de contenedores en HTML?

Estoy realizando una página web que debo presentar para una materia llamada Practica 1 este Jueves y necesito con urgencia saber como ordenar una caja de contenedores en HTML y de tal modo que no me quede una debajo de la otra y en forma ordenada al lado de la otra, proporciono el código más abajo:

CÓDIGO HTML

<section id="cajas">
<div class="contenedor">
<div class="caja">
<img src="img/logo_html5.png">
<h3>HTML5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
<div class="contenedor">
<div class="caja">
<img src="img/logo_css3.png">
<h3>CSS3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
<div class="contenedor">
<div class="caja">
<img src="img/logo_desktop.jpg">
<h3>Diseño gráfico</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
</section>

CÓDIGO CSS

body{
font: 17px Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}

/*estilos globales*/
.contenedor{
width: 80%;
margin: auto;
overflow: hidden;
}

ul{
margin: 0;
padding: 0;
}

.boton2{
height: 38px;
background-color: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #fff;
}

/*Encabezado*/
header{
background-color: #34282b;
color: #fff;
padding-top: 20px;
min-height: 70px;
border-bottom: 5px solid #1293d4;
}

header a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}

header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}

header #marca{
float: left;
}

header #marca h1{
margin: 0;
}

header nav{
float: right;
margin-top: 20px;
}

header .resaltado, header .actual a{
color: #1293d4;
font-weight: bold;
}

header a:hover{
color: #ccc;
font-weight: bold;
}

/*Cabecera con imagen*/
#cabecera{
min-height: 400px;
background: url('../img/cabecera.jpg') 0 -400px;
text-align: center;
color: #fff;
}

#cabecera h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}

# cabecera p{
font-size: 20px;
}

/*formulario boletín*/
#boletin{
padding: 25px;
color: #fff;
background: #24282b;
}

#boletin h1{
float: left;
}

#boletin form{
float: right;
margin-top: 15px;
}

#boletin input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}

/*Cajas*/
#cajas{
margin-top: 20px;
}

#cajas .caja{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}

#cajas .caja img{
width: 90px;
}

/*lateral*/
aside#Lateral{
float: right;
width: 30%
margin-top: 10px;
}

.oscuro{
padding: 15px;
background-color: #35424a;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}

/*Main-col*/
article#main-col{
float: left;
width: 65%;

}

/*Servicios*/
ul#servicios li{
list-style: none;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 5px;
background-color: #e6e6e6;
}

/*footer o pie de pagina*/
footer{
padding: 20px;
margin-top: 20px;
color: #fff;
background-color: #1293d4;
text-align: center;
}

/*Formulario de contacto*/

input, text area{
width: 100%;
height: 35px;
border: 1px solid grey;
margin-bottom: 5px;
}

textarea{
width: 490px;
height: 320px;
}

input[type="submit"]{
background-color: #e8491d;
color: #fff;
}

/*Media Queries responsive*/
@media(max-width: 768px;){
header #marca
header nav,
header nav li,
#boletin h1,
#boletin form,
#cajas .caja,
article#main-col,
article#Lateral,{
float: none;
text-align: center;
width: 100%;
}

header{
padding-bottom: 20px;
}

#boletin h1{
margin-top: 40px;
}

#boletin bottom{
display: block;
width: 100%;
}

#boletin form input[type="email"]{
width: 100%;
margin-bottom: 5px
}

input, textarea{
width: 98%;
}
}

LISTA DESORDENADA DE LA PAGINA

1 Respuesta

Respuesta

No se si este es el resultado que querías pero aquí lo tienes, así es como me queda a mi (lógicamente sin tus imágenes ni nada del estilo):

Esto es como me ha quedado a mi, a continuación te muestro mi código:

Te he marcado en negrita la parte que he cambiado, cualquier duda pregúntame.

Html:

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="hola.css">
</head>
<body>

<section id="cajas">
<div class="contenedor">
<div class="caja">
<img src="img/logo_html5.png">
<h3>HTML5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
</div>

<div class="contenedor">
<div class="caja">
<img src="img/logo_css3.png">
<h3>CSS3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
</div>

<div class="contenedor">
<div class="caja">
<img src="img/logo_desktop.jpg">
<h3>Diseño gráfico</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>
</div>
</section>

</body>
</html>

CSS:

body{
font: 17px Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}

/*estilos globales*/
.contenedor{
width: 80%;
margin: auto;
overflow: hidden;
}

ul{
margin: 0;
padding: 0;
}

.boton2{
height: 38px;
background-color: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #fff;
}

/*Encabezado*/
header{
background-color: #34282b;
color: #fff;
padding-top: 20px;
min-height: 70px;
border-bottom: 5px solid #1293d4;
}

header a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}

header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}

header #marca{
float: left;
}

header #marca h1{
margin: 0;
}

header nav{
float: right;
margin-top: 20px;
}

header .resaltado, header .actual a{
color: #1293d4;
font-weight: bold;
}

header a:hover{
color: #ccc;
font-weight: bold;
}

/*Cabecera con imagen*/
#cabecera{
min-height: 400px;
background: url('../img/cabecera.jpg') 0 -400px;
text-align: center;
color: #fff;
}

#cabecera h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}

# cabecera p{
font-size: 20px;
}

/*formulario boletín*/
#boletin{
padding: 25px;
color: #fff;
background: #24282b;
}

#boletin h1{
float: left;
}

#boletin form{
float: right;
margin-top: 15px;
}

#boletin input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}

/*Cajas*/
#cajas{
margin-top: 20px;
float: left;
display: flex;
}

#cajas .caja{
text-align: center;
width: 100%;
padding: 10px;
}

#cajas .caja img{
width: 90px;
}

/*lateral*/
aside#Lateral{
float: right;
width: 30%
margin-top: 10px;
}

.oscuro{
padding: 15px;
background-color: #35424a;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}

/*Main-col*/
article#main-col{
float: left;
width: 65%;

}

/*Servicios*/
ul#servicios li{
list-style: none;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 5px;
background-color: #e6e6e6;
}

/*footer o pie de pagina*/
footer{
padding: 20px;
margin-top: 20px;
color: #fff;
background-color: #1293d4;
text-align: center;
}

/*Formulario de contacto*/

input, text area{
width: 100%;
height: 35px;
border: 1px solid grey;
margin-bottom: 5px;
}

textarea{
width: 490px;
height: 320px;
}

input[type="submit"]{
background-color: #e8491d;
color: #fff;
}

/*Media Queries responsive*/
@media(max-width: 768px;){
header #marca
header nav,
header nav li,
#boletin h1,
#boletin form,
#cajas .caja,
article#main-col,
article#Lateral,{
float: none;
text-align: center;
width: 100%;
}

header{
padding-bottom: 20px;
}

#boletin h1{
margin-top: 40px;
}

#boletin bottom{
display: block;
width: 100%;
}

#boletin form input[type="email"]{
width: 100%;
margin-bottom: 5px
}

input, textarea{
width: 98%;
}

Ya he cambiado las propiedades pero el problema es que me queda hacia arriba el footer y sin la caja ordenada una al lado de la otra

Claro es como el resultado que me pasaste en la foto que debería quedarme pero como que el navegador Chrome no lo interpreta...

Te dejo un código nuevo, tienes algunas cosas que sobran y que hacen que no te salga bien los floats, y en html sobran algunas cosillas nada mas, así es como me queda al final

Te dejo todo mi código por aquí, cualquier duda o si quieres que te explique alguna parte del código no dudes en preguntar.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="hola.css">
</head>
<body>

<header id="boletin">
<h1>Suscribete al boletin</h1>
<form >
<input type="email" name="" placeholder="Ingrese el email...">
<input <input type="button" value="Click me">
</form>
</header>
<section id="cajas">
<div class="caja">
<img src="html.png">
<h3>HTML5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>

<div class="caja">
<img src="html.png">
<h3>CSS3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>

<div class="caja">
<img src="html.png">
<h3>Diseño gráfico</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius neque quis consectetur fringilla. Fusce blandit, turpis et mattis mollis, justo justo placerat dolor.</p>
</div>

</section>

<footer>
<p>Emanuel Falcon......</p>
</footer>

</body>
</html>

CSS:

body{
font: 17px Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}

/*estilos globales*/

ul{
margin: 0;
padding: 0;
}

.boton2{
height: 38px;
background-color: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #fff;
}

/*Encabezado*/
header{
background-color: #34282b;
color: #fff;
padding-top: 20px;
min-height: 70px;
border-bottom: 5px solid #1293d4;
}

header a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}

header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}

header #marca{
float: left;
}

header #marca h1{
margin: 0;
}

header nav{
float: right;
margin-top: 20px;
}

header .resaltado, header .actual a{
color: #1293d4;
font-weight: bold;
}

header a:hover{
color: #ccc;
font-weight: bold;
}

/*Cabecera con imagen*/
#cabecera{
min-height: 400px;
background: url('../img/cabecera.jpg') 0 -400px;
text-align: center;
color: #fff;
}

#cabecera h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}

# cabecera p{
font-size: 20px;
}

/*formulario boletín*/
#boletin{
padding: 20px;
color: #fff;
background: #24282b;
}

#boletin h1{
float: left;
}

#boletin form{
float: right;
margin-top: 15px;
}

#boletin input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}

#boletin input[type="button"]{
padding: 4px;
height: 25px;
width: 100px;
}

/*Cajas*/

#cajas{
width: 100%;
height:300px;
margin-top: 30px;

}

#cajas .caja{
text-align: center;
padding: 10px;

margin: 20px;
width: 30%;
float: left;
}

#cajas .caja img{
width: 80px;
}

/*lateral*/
aside#Lateral{
float: right;
width: 30%
margin-top: 10px;
}

.oscuro{
padding: 15px;
background-color: #35424a;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}

/*Main-col*/
article#main-col{
float: left;
width: 65%;

}

/*Servicios*/
ul#servicios li{
list-style: none;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 5px;
background-color: #e6e6e6;
}

/*footer o pie de pagina*/
footer{

padding: 20px;
margin-top: 22.5%;
color: #fff;
background-color: #1293d4;
text-align: center;
clear: both;
}

/*Formulario de contacto*/

input, textarea{
width: 100%;
height: 35px;
border: 1px solid grey;
margin-bottom: 5px;
}

textarea{
width: 490px;
height: 320px;
}

input[type="submit"]{
background-color: #e8491d;
color: #fff;
}

/*Media Queries responsive*/
@media(max-width: 768px;){
header #marca
header nav,
header nav li,
#boletin h1,
#boletin form,
#cajas .caja,
article#main-col,
article#Lateral,{
float: none;
text-align: center;
width: 100%;
}

header{
padding-bottom: 20px;
}

#boletin h1{
margin-top: 40px;
}

#boletin bottom{
display: block;
width: 100%;
}

#boletin form input[type="email"]{
width: 100%;
margin-bottom: 5px
}

input, textarea{
width: 98%;
}

Se va ordenando las cajas pero tengo el siguiente problema

Necesitara todo tu código de CSS y HTML para poder ver que pasa, pero así de primeras podría decirte que que el problema esta en el alto que le das a la parte donde guardas tu formulario. Pero pásame tu código entero te lo resuelvo y te lo explico sin ningún problema.

¿Tenes un e-mail de casualidad para poder enviarte el archivo adjunto de la pagina?

Si, aquí te lo dejo [email protected].

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he...
2 respuestas

Como centrar los botones del menu principal de OpenCart desde el stylesheet.css

Genero una pregunta pensando que entiende del tema propiamente de la plataforma opencart 2.0, la pregunta es cómo hago para centrar los botone del menú principal de la plataforma, pues por defecto vienen alineados a la izquierda, el código...
1 respuesta

Como alinear DIV en html con Contenendor

Tengo la siguiente consulta espero me puedan ayudar. Tengo un contenedor, en el cual hay 3 columnas lo que quiero es que las tres columnas estén alineadas dentro del contenedor. Aquí esta el código. HTML: <div id="contenedorinicio"> <div id="colum1">...
1 respuesta

Cómo alinear un menú horizontal en el Top de la página.

Necesito de su ayuda con esto: Miren tengo un menú, pero cuando bajo con la barra que esta en la derecha, la barra también BAJA... Aquí les dejo un imagen. Quisiera que solo se queda en el top de la página... De modo que cuando yo baje con la barra...
1 respuesta

Sobre el Footer

Soy Manuel, he realizado mi página web en photoshop, html5 y por último en css3, pero en ésta última parte no logro colocar los iconos de la redes sociales, sólo me aparece un hueco como si estuviera puesto, aunque en realidad no hay nada, lo he...
1 respuesta

Visualización

Hice una página para un una universidad que me pidieron tero tengo problemas con la visualización esta es la dirección http://163.10.0.155/webproyecto2006/folder10/ Tengo problemas con los <div></div> y con las imágenes degrade si a la pantalla le...
1 respuesta

Grabar desconexión de usuario logueado

Tengo una web en la que los usuarios pueden loguearse, y al hacerlo se graba en una base de datos mysql el usuario y la hora de conexión. Quisiera saber cómo hacer para que también quede grabada la hora de "desconexión". Si pulsan el botón de cerrar...
2 respuestas

Galeria de imagenes html con marquee

Soy nuevo en la creación de páginas web, y estoy haciendo una personal. Mi problema surge cuando quiero crear una galería de imágenes, para la que estoy utilizando marquee. Para mostrar las imágenes en menor tamaño y al hacer click que se vean más...
1 respuesta

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta