porcentajes + valores fijos

Finseneu · #1 (**permalink**) 26/10/2010, 06:18

Por poner un ejemplo simple...2 cajas flotantes una al lado de la otra, quiero que ocupen el total del ancho de la pantalla entonces le asigno un ancho del 50% a c/u. Pero digamos que quiero poner una linea de 1 pixel entre medio de las dos como separador, ese pixel extra ya me genera el scroll horizontal.
O poniendolo de otra forma...existe alguna manera de operar entre porcentajes y valores fijos de modo que pudiera hacer algo como esto?

Código CSS:

Ver originalwidth: 50% - 1px;

kseso? · #2 (**permalink**) 26/10/2010, 07:04

Pruebe a jugar con márgenes con valor negativo en el lado contrario al flotado y de igual valor que el borde. No le he verificado. Pero es la técnica utilizada para el bug del doble margen en ie

Finseneu · #3 (**permalink**) 26/10/2010, 17:48

Estuve probando y no me va, el scoll horizontal no se modifica en nada...no se si estare haciendo algo mal yo.

Saludos!

gamau6 · #4 (**permalink**) 27/10/2010, 11:14

facil tendrias que colocar en medio de los 2 un border-left con la propiedad que mas te guste

masterojitos · #5 (**permalink**) 27/10/2010, 11:25

Dos salidas rapido.... una es asignandole borde lateral a una de las dos cajas que simule la linea de separacion y la otra es que en vez de aisgnar 50%, le asignes 49% ^^

suerte

kseso? · #6 (**permalink**) 27/10/2010, 11:44

Dos cajas ocupando entre ellas el 100% del body, una de ellas con un borde lateral de 1px sin que ello fuerce la aparición del scroll-x y sin usar overflow: hidden.
Creo que era eso lo que se solicitaba.
A ver si lo siguiente es válido:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
 * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
  }
html, body {
    background: #FFFB00;
    font-weight:normal;
    font-size: 100%;
    height:100%;
    width:100%;
  }
#izquierda, #derecha {width: 50%; height: 400px; position: relative;}
#izquierda {background: #4000F0; border-right: 1px solid #fff; float: left; margin-left: -1px;}
#derecha {background: #000080; float: right;}
</style>
</head>
<body>
<div id="izquierda"></div>
<div id="derecha"></div>
</body>
</html>

Era la idea que apuntaba en #2

dargorg · #7 (**permalink**) 27/10/2010, 17:20

Esta bien la solución que apuntas Kseso? pero ahora lo que ocurre es que si en vez de 1px le restas 200px, la caja #izquierda no tendrá 50%+200px, sino que seguirá siendo del 50% con lo que no se ajustará a la totalidad de la pantalla...

Saludos

kseso? · #8 (**permalink**) 27/10/2010, 18:05

Hey! dargorg, aquí!, mire la consulta

Cita:

Iniciado por Finseneu

Por poner un ejemplo simple...2 cajas flotantes una al lado de la otra, quiero que ocupen el total del ancho de la pantalla entonces le asigno un ancho del 50% a c/u. Pero digamos que quiero poner una linea de 1 pixel entre medio de las dos como separador, ese pixel extra ya me genera el scroll horizontal.
O poniendolo de otra forma...existe alguna manera de operar entre porcentajes y valores fijos de modo que pudiera hacer algo como esto?

Cita:

width: 50% - 1px;

Porque entre lo mucho que ni soy ni tengo es adivino o facultades paranormales. Si pide 1px, damos 1px.

Cita:

Iniciado por dargorg

Esta bien la solución que apuntas Kseso? pero ahora lo que ocurre es que si en vez de 1px le restas 200px, la caja #izquierda no tendrá 50%+200px, sino que seguirá siendo del 50% con lo que no se ajustará a la totalidad de la pantalla...

Saludos

Eso ya sería otra consulta totalmente diferente y habría que buscar otro enfoque y solución totalmente distinta.
Así, a la carrera y ya adormilado:
Dos cajas adyacentes al 50% de anchura cada una.
Dentro de cada una de ellas otra con su borde lateral correspondiente de la mitad del borde total deseado (200px/2 o los que fuesen) y para que quede bonito unas falsas columnas si se desconoce a priori los contenidos de cada una de ellas.

Supongo que debería funcionar.

Finseneu · #9 (**permalink**) 27/10/2010, 20:21

Gracias, lo voy a chequear en breve.

dargorg · #10 (**permalink**) 28/10/2010, 09:14

kseso? siento si te molestó lo que dije, para ser sinceros yo sabía la respuesta, parecida a la tuya lo que pasa que no me apeteció escribir. Mil disculpas; sólo intentaba ser constructivo.

Un saludo

kseso? · #11 (**permalink**) 01/11/2010, 08:37

¿Molesto? ¿Transmitió esa sensación mi comentario? Vaya que andamos sobrados de sensibilidad.
No, ni lo estaba ni era mi intención manifestar enfado o nada por el estilo.
Pero...

Cita:

Iniciado por dargorg

...para ser sinceros yo sabía la respuesta, parecida a la tuya lo que pasa que no me apeteció escribir...

Eso, lo resaltado, sí que lo encuentro innecesario y totalmente inapropiado. Y más cuando no es la primera vez que realiza este tipo de comentario.

P.D.: y tampoco lo estoy diciendo ni enfadado ni molesto. Símplemente lo manifiesto. Quizás no haya reparado en lo que subyace en esa frase y al señalárselo se de cuenta y lo evite en el futuro. Si lo cree conveniente, que tampoco está obligado.