Hola buenas tardes ¡¡ , el Css a dia de hoy me sigue trayendo de cabeza, tardo más en diseñar una página que en programar una web , pero bueno habrá que acostumbrarse digo yo.
El problema que tengo es que tengo una capa central donde quiero poner 3 menus a la izquierda y 1 menú a la derecha.
Si lo hago con
float left (dentro de la capa contenedora que contiene todos los menus) me posiciona perfectamente los menus a la izq como es lógico , y si pongo
float:right al menú que quiero en la derecha lo mismo. El problema por el que me estoy tirando de los pelos (:: es que cuando inserto contenido en el menú de la derecha se corre todo para abajo (me refiero a que se crea un espacio entre los menus de la izquierda cosa que no debería de pasar).
¿Alguien me puede decir como se soluciona esto?.
Voy a pegar parte del código:
Código:
<div class="PostMetadataHeader">
<div class="left_box">
<div class="line">Noticias</div>
<ul class="bg_lista">
<li>texto noticia 1. | Imagen 1</li>
<li>texto noticia 2 | Imagen 1</li>
</ul>
</div>
<div class="right_box ">
<div class="line">Titulo principal</div>
<ul class="bg_lista">
<li>Noticia 1 | Imagen 1</li>
<li>Noticia 1 | Imagen 1</li>
</ul>
<ul class="bg_lista">
<li>Noticia 1 | Imagen 1</li>
<li>Noticia 1 | Imagen 1</li>
</ul>
<ul class="bg_lista">
<li>Noticia 1 | Imagen 1</li>
<li>Noticia 1 | Imagen 1</li>
</ul>
<ul class="bg_lista">
<li>Noticia 1 | Imagen 1</li>
<li>Noticia 1 | Imagen 1</li>
</ul>
<ul class="bg_lista">
<li>Noticia 1 | Imagen 1</li>
<li>Noticia 1 | Imagen 1</li>
</ul>
</div>
<div class="cleared"></div>
<div class="left_box">
<div class="line">Noticias</div>
<ul class="bg_lista">
<li>noticias del sitiol | Imagen 1</li>
<li>noticias del sitio | Imagen 1</li>
</ul>
</div>
<div class="cleared"></div>
<div class="left_box">
<div class="line">Noticias</div>
<ul class="bg_lista">
<li>Cnoticias del sitio | Imagen 1</li>
<li>noticias del sitiol | Imagen 1</li>
</ul>
</div>
<div class="cleared"></div>
</div>
Y el css lo tengo así
Código:
.text_intro {font-family:Tahoma; font-size:16px }
.line { background-color:#000099; color:#FFFFFF; font-size:16px; letter-spacing:0.3em;
width:220px;border:#000066 1px solid }
.left_box { float:left; padding:10px; width:230px; }
.right_box { float:right; padding:10px; width:190px; }
.border_table { border:#000066 1px solid }
.titular {color:#FF0000 }
Un saludo y gracias de antemano