Hola, tengo la siguiente estructura de divs y la quiero convertir a la que indica la flecha:
El codigo que tengo es el siguiente:
Código:
<div id="header" style="border:1px solid green; height:105px; width:990px">
<div style="width:210px; height:85px; border:1px solid #CCCC00">
hola
</div>
<div style="width:468px; height:60px; border:1px solid #CCCC00;">
adios
</div>
Como ven todo esta dentro de un "header" y lo que me gustaria es que no se produjera el salto de linea despues del primer div para que el segundo estuviera alieneado con el. No me vale que sean span, porque necesito que tengan esos tamañanos. He probado con page-break-before y after pero nada.
Mi remedio cutre ha sido este:
Código:
<div id="header" style="border:1px solid green; height:105px; width:990px">
<div style="position: relative;width:210px; height:85px; border:1px solid #CCCC00">
hola
</div>
<div style="position:relative;left:211px;top:-85px;width:468px; height:60px; border:1px solid #CCCC00;">
adios
</div>
Es decir, he puesto los divs a tratar como relativos al header y he "reajustado" la posición del div segundo con el left y el top.
El verdadero problema es que tengo 4 bloques asi mas y claro ir calculando todas las posiciones es un engorro, ademas de que no creo que sea una solución elegante. Por eso recurro a vuestra ayuda, a ver si me podeis decir si existe una manera mas elegante de hacer esto.
Un saludo.