Foros del Web » Creando para Internet » CSS »

problema con min-height: mi pagina al crecer se corre hacia el lado

Estas en el tema de problema con min-height: mi pagina al crecer se corre hacia el lado en el foro de CSS en Foros del Web. hola, bueno tengo un problema que no logro solucionar...resulta que tengo en mi codigo css de mi pagina esto: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original ...
  #1 (permalink)  
Antiguo 08/02/2011, 19:12
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 13 años, 9 meses
Puntos: 6
Exclamación problema con min-height: mi pagina al crecer se corre hacia el lado

hola, bueno tengo un problema que no logro solucionar...resulta que tengo en mi codigo css de mi pagina esto:

Código CSS:
Ver original
  1. #RightPart
  2. {
  3.     float: right;
  4.     width: 600px;
  5.     min-height: 150px;
  6.     height: 550px;
  7. }


Resulta el "min-height" que sale en el css, lo tengo tamaño pequeño para que ha medida que cargue la información valla creciendo la pagina, pero al agrandarse la pagina completa se corre hacia el lado =S

la verdad que nose porque ocurre esto...de todas maneras voy a dejar el css completo:
Código CSS:
Ver original
  1. *{
  2. padding:0;
  3. margin:0;
  4. }
  5.  
  6. a {
  7.     color:#80a012;
  8.     outline:none;
  9.     text-decoration: none;
  10.     font-weight:bold;
  11. }
  12.  
  13. a:hover
  14. {
  15.     text-decoration:underline;
  16.     color:#5A5551;
  17. }
  18.  
  19. body
  20. {
  21.     background-color: white;
  22.     font-family: arial;
  23.     font-size: 12px;
  24. }
  25.  
  26. #Inner
  27. {
  28.     background: url("img/bac_2.gif") top left repeat-x;
  29.     height: 235px;
  30.     margin-top: 0px;
  31. }
  32.  
  33. #Container
  34. {
  35.     width: 900px;
  36.     margin: 0px auto;
  37. }
  38.  
  39. #Top_left
  40. {
  41.     background: url("img/logo.gif") bottom left no-repeat;
  42.     width: 240px;
  43.     height: 151px;
  44.     float: left;
  45.     padding-top: 30px;
  46.     padding-left: 60px;
  47. }
  48.  
  49. .company
  50. {
  51.     color: #fe8a01;
  52.     font-family: Candara;
  53.     font-size: 28px;
  54.  
  55. }
  56.  
  57. .name
  58. {
  59.     color: #7d9d0d;
  60.     font-family: Candara;
  61.     font-size: 28px;
  62. }
  63.  
  64. .link
  65. {
  66.     color: #5a5551;
  67.     font-family: Candara;
  68.     font-size: 14px;
  69.     text-decoration: none;
  70.     padding-left: 23px;
  71. }
  72.  
  73. #Top_right
  74. {
  75.     background: url("img/welcome.gif") bottom right no-repeat;
  76.     width: 600px;
  77.     height: 206px;
  78.     float: right;
  79.     background-color: white;
  80. }
  81.  
  82. .first_line
  83. {
  84.     color: #272625;
  85.     font-family: Candara;
  86.     font-size: 18px;
  87.     padding-right: 23px;
  88.     margin-top: 110px;
  89.     float: right;
  90. }
  91.  
  92. .second_line
  93. {
  94.     color: #272625;
  95.     font-family: Candara;
  96.     font-size: 33px;
  97.     padding-left: 220px;
  98.     margin-top: 110px;
  99.     float: left;
  100. }
  101.  
  102. .third_line
  103. {
  104.     color: #272625;
  105.     font-family: Candara;
  106.     font-size: 25px;
  107.     padding-right: 43px;
  108.     float: right;
  109.     margin-top: 10px;
  110. }
  111.  
  112. #Head
  113. {
  114.     height: 54px;
  115. }
  116.  
  117.  
  118.  
  119. #Menu
  120. {
  121.     background: white;
  122.     width: 900px;
  123.     height: 48px;
  124.     float: left;
  125.     border-top: 6px solid #66615d;
  126. }
  127.  
  128. #Menu ul
  129. {
  130.     display:block;
  131.     margin:0;
  132.     padding:0;
  133.     list-style:none;
  134. }
  135. #Menu ul li
  136. {
  137.     display:block;
  138.     float:left;
  139.     margin:0 2px;
  140. }
  141. #Menu ul li a
  142. {
  143.     display:block;
  144.     width:132px;
  145.     height:50px;
  146.     background:url(img/boton.png)  left no-repeat;
  147.     background-position: 0px 10px;
  148.     font-size: 18px;
  149.     color:#fff;
  150.     text-align:center!important;
  151.     text-decoration:none;
  152.     line-height:60px;
  153. }
  154. #Menu ul li a:hover,#Menu ul li a:active
  155. {
  156.     background:url(img/boton_2.png)  left no-repeat;
  157.     background-position: 0px 10px;
  158. }
  159.  
  160. #CentralPart
  161. {
  162.     width: 900px;
  163.     clear: both;
  164. }
  165.  
  166. #LeftPart
  167. {
  168.     width: 300px;
  169.     float: left;
  170. }
  171.  
  172.  
  173. ul.flecha{
  174.     list-style: url('img/green-arrow.png');
  175.     text-align:left;
  176.     padding-left: 50px;
  177.     margin-bottom:75px;
  178.     margin-top: 10px;
  179.     margin-left: 10px;
  180. }
  181. ul img
  182. {
  183.     padding-top: 10px; 
  184. }
  185.  
  186. ul.flecha li
  187. {
  188.     font-size:14px;
  189.     margin-top: 10px;
  190. }
  191.  
  192. #RightPart
  193. {
  194.     float: right;
  195.     width: 600px;
  196.     min-height: 150px;
  197.     height: 550px;
  198. }
  199.  
  200. *>#RightPart
  201. {
  202.     height: auto;
  203. }
  204.  
  205. .cleaner
  206. {
  207.     clear: both;
  208. }
  209.  
  210. #Page
  211. {
  212.     width: 600px;
  213. }
  214.  
  215. h1
  216. {
  217.     font-size: 14px;
  218.     color: #5a5551;
  219.     line-height: 25px;
  220.     font-weight: bold;
  221.     padding-left: 32px;
  222.     background: url("img/gray-arrow.gif") top left no-repeat;
  223. }
  224.  
  225. h2
  226. {
  227.     font-size: 14px;
  228.     line-height: 25px;
  229.     font-weight: bold;
  230.     padding-left: 25px;
  231.     margin-top: 10px;
  232. }
  233.  
  234. h3
  235. {
  236.     font-size: 12px;
  237.     line-height: 20px;
  238.     font-weight: bold;
  239.     color: #5a5551;
  240. }
  241.  
  242. h4
  243. {
  244.     font-size: 16px;
  245.     line-height: 25px;
  246.     font-weight: bold;
  247.     padding-left: 25px;
  248.     margin-top: 10px;
  249. }
  250.  
  251. .article
  252. {
  253.     padding: 7px;
  254.     background-color: #dfdfdf;
  255.     margin-top: 8px;
  256.     margin-left: 30px;
  257. }
  258.  
  259. p
  260. {
  261.     padding: 5px 12px 0px 32px;
  262.     text-align: justify;
  263. }
  264.  
  265. .foto2
  266. {
  267.     width: 94px;
  268.     height: 100px;
  269.     float: left;
  270.     padding:  7px 10px 7px 34px;
  271.  
  272. }
  273.  
  274. .gray
  275. {
  276.     color: #5a5551;
  277.     background: url("img/black-i.gif") top left no-repeat;
  278.     background-position: 0px 4px;
  279. }
  280.  
  281. *>.gray
  282. {
  283.     margin-top: -20px;
  284. }
  285.  
  286. .orange
  287. {
  288.     color: #e3920c;
  289.     background: url("img/orange-i.gif") top left no-repeat;
  290.     background-position: 0px 4px;
  291. }
  292.  
  293. .green
  294. {
  295.     color: #80a012;
  296.     background: url("img/green-i.gif") top left no-repeat;
  297.     background-position: 0px 4px;
  298. }
  299.  
  300. .left
  301. {
  302.     padding: 0px 0px 5px 0px;
  303. }
  304.  
  305. .decor
  306. {
  307.     background: url("img/orange-arrow.gif") top left no-repeat;
  308.     padding-left: 25px;
  309.     background-position: 0px 2px;
  310. }
  311.  
  312. .decor_green
  313. {
  314.     background: url("img/green-arrow.png") top left no-repeat;
  315.     padding-left: 25px;
  316.     background-position: 0px 2px;
  317. }
  318.  
  319. .foto1
  320. {
  321.     width: 83px;
  322.     height: 82px;
  323.     float: left;
  324.     padding:  0px 7px 0px 0px;
  325.  
  326. }
  327.  
  328. #Bottom
  329. {
  330.     width: 900px;
  331.     float: left;
  332.     border-top: 4px solid #5a5551;
  333.     margin-top: 5px;
  334. }
  335.  
  336. *>#Bottom
  337. {
  338.     margin-top: -5px;
  339. }
  340.  
  341. .down
  342. {
  343.     font-size: 11px;
  344.     text-align: right;
  345.     padding-bottom: 10px;
  346. }
  347.  
  348. .down a
  349. {
  350.     color: #5a5551;
  351. }
  352.  
  353.  
  354. .down2
  355. {
  356.     padding-bottom: 10px;
  357.     float: right;
  358. }
  359.  
  360. .down2 img
  361. {
  362.     border: 0px;
  363. }

ojala puedan ayudarme...muchas gracias de ante mano =D
espero sus respuestas!
saludos!
  #2 (permalink)  
Antiguo 09/02/2011, 14:28
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 13 años, 3 meses
Puntos: 444
Respuesta: problema con min-height: mi pagina al crecer se corre hacia el lado

Sería más cómodo si enviaras el enlace a la página web en cuestión... si no quieres que sea pública, envíamela por mensaje privado.
  #3 (permalink)  
Antiguo 09/02/2011, 14:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: problema con min-height: mi pagina al crecer se corre hacia el lado

compañero nada de mensajes privados para este tipo de informacion, si no se desea el link a su sitio sea publico puede disfrazarlo con algún acortador de url como bit.ly

Etiquetas: crecer, lado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:20.