Tengo el siguiente código HTML:
Código:
<div id="contenido">
<div id="superior">
<p>Aquí va una introducción a modo de titular o de resumen</p>
</div>
<div id="izquierda">
<h4>Título 1</h4>
<p>Aliquam sagittis ipsum vel urna. Nam elit. Morbi in metus. Aenean at nunc vel felis euismod mattis. Pellentesque ligula. Proin tempus libero. Donec nunc eros, tempus non, cursus sed, ullamcorper nec, dui. Donec mi est, porttitor et, mollis ut, elementum non, est. Sed laoreet tincidunt mi. Sed varius mi id wisi.</p>
<h4>Título 2</h4>
<p>Donec lobortis risus sed diam. Duis non tellus. Cras placerat urna eu eros. Phasellus wisi nibh, iaculis nec, volutpat a, vulputate a, felis. Nunc elementum est non diam viverra tempor. Aliquam erat volutpat. Mauris ligula ipsum, lacinia sed, laoreet vel, interdum et, elit. Aliquam lacinia pretium libero.</p>
</div>
<div id="derecha">
<h4>Título 3</h4>
<p>In commodo neque et arcu. Aliquam pharetra ipsum vel velit. Phasellus felis justo, aliquam vitae, interdum ac, sollicitudin vel, metus. Fusce lacinia, lorem et accumsan fermentum, diam massa adipiscing turpis, sed pretium ipsum nibh nec lectus. Vestibulum dapibus metus at nibh.</p>
<h4>Título 4</h4>
<p>Nam vitae massa vitae augue sollicitudin euismod. Aenean dictum risus id nisl. Nam id mauris quis massa mattis mollis. In ut velit vel magna sagittis congue. In lobortis. Sed tempus. Praesent tortor turpis, lobortis ut, volutpat vel, lobortis a, nisl.</p>
</div>
<div id="inferior">
<a href="mas.htm" class="siguiente">siguiente</a>
</div>
</div>
Que funciona con el siguiente CSS:
Código:
<style>
div#contenido {
width: 720px;
}
div#superior {
width: 651px;
border-top: 12px solid white;
border-bottom: 12px solid white;
}
div#izquierda {
width: 303px;
float: left;
}
div#derecha {
width: 303px;
float: right;
}
div#inferior {
float: right;
}
</style>
Pero me surgen 2 problemas que tal vez podais resolverme:
1) En Internet Explorer el div contenido se alarga tanto como sea necesario para contener a sus divs hijos, pero Mozilla no. En Mozilla los divs con float sobresalen del div contenido.
¿Es posible acomodar los divs izquierda y derecha dentro del div contenido y que sigan quedando uno a la izquierda y otro a la derecha?
2) Quiero que el div inferior quede justo debajo de los divs izquierda y derecha y que se alinee a la derecha. ¿Como lo hago? Con ese CSS se queda a la izquierda del div derecha y no sé porqué
Gracias por la atención y espero que podais ayudarme.
