Tengo dos divisiones dentro de un contenedor. Uno flota a la izquierda y otro flota a la derecha. Ambos son aproximadamente 60% más anchos que el contenedor y están diseñados de tal manera que se superponen en el medio (el elemento derecho tiene prioridad).CSS: hacer que dos elementos flotantes se superpongan
¿Cómo hago para que se superpongan en lugar de apilarse verticalmente como lo hacen los elementos flotantes? Si posiciono de manera absoluta el elemento correcto, el div que lo contiene no se expande para ajustarse al contenido.
de código (por desgracia no puedo jsFiddle esto como sus servidores son de sólo lectura atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Si estoy correcto, el atributo "mostrar: en línea" tampoco permite establecer las dimensiones. Esto significa que si configura su pantalla en línea, no debe definir ningún ancho y/o altura. Y flotas, ese en línea me parece inútil. Utilizaría z-index, que puede controlar a través de javascript on: coloca el cursor sobre el elemento o hace clic en() s (intercambia valores entre los dos elementos). ¿Qué tan dinámica es tu interfaz? – benqus
El 'display: inline' es redundante ya que cualquier elemento que esté' float'ed es automáticamente 'display: block'. – Gareth