Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

HTML - COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

Publicado por yeiel (2 intervenciones) el 09/05/2015 20:28:57
QUIERO CREAR TRES COLUMNAS EN HTML PEROOO SIN FRAMES ME HEEE ESTRESADO BASTANTE SOY BASICO EN EL TEMA NO LE SE MUCHO EN VERDAD SERIA DE MUCHA AYUDA QUE ALGUIEN ME AYUDE DE VERDAD LO QUE QUIERO ES ACOMODAR MIS ELEMENTOS EN LAS TRES COLUMNAS DE MI IMAGEN DE FONDO QUE ES UN GIF PARA QUE CUANDO ACOMODE UN ELEMENTO NO OCUAPE TODA LA LINEA HORIZONTAL Y LUEGO SI ACOMODO OTRA SE SALTE ABAJO POR QUE EL PRIMER ELEMTO YA ESTA AHIO Y DIGAMOS QUIERO QUE MIS ELEMENTOS QUEDEN PAREJOS EN UNA SOLA LINEA O AL MENOS MANIPULARLOS YO POR FAVOR

mi codigo html es este
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="practica47.css" type="text/css">
</head>
<BODY BACKGROUND="yy.gif">
 
<div id="cabecera">
  <ul>
    <li><a href="">Opcion 1</a></li>
    <li><a href="">Opcion 2</a></li>
    <li><a href="">Opcion 3</a></li>
  </ul>
</div>
 
<div class="columna_izquierda">
    <p>
<iframe width="200" height="200" src="https://www.youtube.com/embed/gCYcHz2k5x0?list=RDHCTpLQJBkRzcM"?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<br><br><br>

<br><br>

<!-- Contador de visitas -->

<left><a href="http://www.websmultimedia.com/contador-de-visitas-gratis" title="Contador De Visitas Gratis">
<img style="border: 0px solid; display: inline;" alt="contador de visitas" src="http://www.websmultimedia.com/contador-de-visitas.php?id=190616"></a><br><a href='http://www.websmultimedia.com/contador-de-visitas-gratis'></a><br><a href='http://www.websmultimedia.com'></a></left>
<!-- Fin Contador de visitas -->

<br>

<div style="text-align:left;width:240px;padding:0.0em 0;"> <h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/es/city/3530597"><span style="color:gray;"> <iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=es&timezone=America%2FMexico_City" width="100%" height="130" frameborder="0" seamless></iframe> <small style="color:gray;">&copy; <a href="http://www.zeitverschiebung.net/es/"style="color: gray;"></a></small> </div>
<br>

<div align="left"><table border=0 cellpadding=2 cellspacing=0>
<tr><td bgcolor=red align=center>

<A HREF=

"https://www.google.com.mx/">
<font color=white><B>GOOGLE</B></FONT></a>

</td></tr><tr><td align=center bgcolor=silver>

<FORM ACTION="https://www.google.com.mx/"
METHOD="GET">
<INPUT TYPE="HIDDEN"
NAME="id" SIZE="-1" VALUE="1276270">
<INPUT TYPE="HIDDEN" NAME="pageid" SIZE="-1" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" SIZE="-1" VALUE="ALL">
 <INPUT TYPE="TEXT" NAME="query" SIZE="19"><br>
 <small><INPUT TYPE="SUBMIT" VALUE=" buscar "></small>
  

<font size=1>servizio fornito da <A HREF="https://www.google.com.mx/">
FreeFind</A> </font></FORM></td></tr></table></div>

    </p>

</div>

<div class="columna_central">
   <p>

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2

     columna2 columna2 columna2 columna2 columna2 columna2 

</p>

</div>

<div class="columna_derecha">
  <p>

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

     columna3 columna3 columna3 columna3 columna3 columna3

  </p>

</div>



<div id="pie">
  <p>Copyright</p>

</div>

</body>


y mi codigo css es este

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
div
{
	border:1px solid black;
}
#cabecera

{
}
#columna_izquierda

{
	margin-top:10px;
	float:left;
	width:100px;
}
#columna_derecha

{
	margin-top:10px;
	width:100px;
	float:right;
}
#columna_central

{
	margin:10px;
	margin-left:120px;
	margin-right:120px;
}
#pie

{
clear:both;



si me pueden ayudar por favor o por correo quien guste que se los pase
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

Publicado por xve (1543 intervenciones) el 09/05/2015 21:17:54
Mira este simple ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
 
    <style>
    .columna {float:left;width:33%;border:1px solid;}
    </style>
</head>
 
<body>
 
<div class="columna">columna 1</div>
<div class="columna">columna 2</div>
<div class="columna">columna 3</div>
 
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

Publicado por yeiel (2 intervenciones) el 09/05/2015 21:50:23
muchisimas gracias amigo mil gracias que tengas un buen dia

una pregunta mas como acomodo mmm quiero que mi titulo musical disorder este en la parte del centro y los demas elementos esten ala izquierda pero a la misma altura que el titulo sin que el titulo bajo u otro elemento por fa como una sola fila
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

COMO HACER TRES COLUMNAS EN HTML SIN FRAMES

Publicado por xve (1543 intervenciones) el 10/05/2015 07:39:28
No entiendo muy bien a que te refieres... "disorder"¿?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Tomando el ejemplo anterior te dejo el code con modificación para Mobile y Tableta.

Publicado por Francisco Cal y Mayor (1 intervención) el 01/10/2021 18:39:09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
.columna {float:left;width:33%;border:0px solid;}
@media (max-width: 980px) {
.columna {float:none;width:100%;}
}
</style>
</head>

<body>

<div class="columna">Contenido 1</div>
<div class="columna">Contenido 2</div>
<div class="columna">Contenido 2</div>

</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar