Es eso posible? Porque no me ha funcionado ningún método convencional.
Trataré de ser lo mas explicito posible:
Tengo un div contenedor, centrado con su BG expandible (Llámese main). Dentro de ese div, tengo a otro, que margina el contenido (Llámese main_content), dentro de ese div, está un menú, a la izq (llámese main_menu), y finalmente, QUIERO poner un div llamado main_news AL LADO de main_menu, pero tengo resultados indeseados. Estos son los resultados:
Con position: absolute:
El bg expansible no funciona, porque main_news aparece FUERA de main_content
Con position: relative:
El BG expandible toma la forma del div, y lo sube. (Se expando el doble, en palabras simples)
Es obio que con fixed, y static, no funciona, sale por abajo.
Con float:
Se sale completamente del flujo del Documento. Sale como debería, pero fuera del div.
La única manera que he podido acercarme al resultado ha sido con márgenes negativos. ¿Hay una manera de posicionar DENTRO de ese div sin tanta vuelta?
Gracias.
(Aquí está el Código, si quieren evaluarlo.)
XHTML
Código HTML:
<body>
<div id="main_news_centered_header"></div>
<div id="main_news_centered_container">
<div id="main_news_inside">
<div id="main_menu"><script type="text/javascript" src="../scripts/level_II/menu.js"></script></div>
<div id="main_news" class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div id="main_news_centered_footer"></div>
</body> Y el CSS:
Código:
body
{
background-image: url(../img/news/background.jpg);
background-repeat: repeat-x;
}
div#main_news_centered_container
{
width: 750px;
margin-left: auto;
margin-right: auto;
height: auto;
background-image: url(../img/news/background.png);
background-repeat: repeat-y;
}
div#main_news_centered_header
{
width: 750px;
margin-left: auto;
margin-right: auto;
height: 55px;
background-image: url(../img/news/header.png);
background-repeat: no-repeat;
}
div#main_news_centered_footer
{
width: 750px;
margin-left: auto;
margin-right: auto;
height: 55px;
background-image: url(../img/news/footer.png);
background-repeat: no-repeat;
}
div#main_news_inside
{
width: 650px;
margin-left: auto;
margin-right: auto;
height: auto;
}
div#main_menu
{
width: 160px;
height: auto;
margin-left: 0px;
padding-top: 1px;
padding-bottom: 1px;
}
div#main_news
{
width: 300px;
height: auto;
}
EDIT:
Estuve probando también con Clear y Display.
Solo "inline-table" me dió resultado de todos los displays, pero es solo compilante con unos muy pocos Browsers (Los buenos, FF 3.0, Safari 3.1 y Opera 9.50), estoy buscando compatibilidad, y esa no es la solución. Si me pueden dar algún método con Display, lo sabría apreciar.