¿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