[SOLUCIONADO] Problema fondo de div

kenyis01 · #1 (**permalink**) 31/10/2013, 13:40

Tengo un problema, que quizá sea muy tonto pero no logro solucionarlo.

les dejo una imagen, tengo un div "content" que debería ocupar todo el cuerpo de la pagina con blanco de fondo pero no funciona, me queda así:

http://imageshack.us/photo/my-images/5/rslj.jpg/

y debería quedar así:

http://imageshack.us/photo/my-images/689/5jgp.jpg/

Les dejo el código:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
        <link rel="stylesheet" href="css/sample-styles.css" type="text/css" />
        
    </head>
    
    <body>
    
<div id="site">
<div id="wrapper">
    <div id="content">
        <div id="main-wrapper">
            <div class="slider-wrapper">
                <div id="slider">
                    <div class="slide1">
                        <img src="images/slider/1.jpg" alt="" />
                    </div>
                    <div class="slide2">
                        <img src="images/slider/2.jpg" alt="" />
                    </div>
                    <div class="slide3">
                        <img src="images/slider/3.jpg" alt="" />
                    </div>
                    <div class="slide4">
                        <img src="images/slider/4.jpg" alt="" />
                    </div>
                </div> <!--slider-->
                    <div id="slider-direction-nav"></div>
                    <div id="slider-control-nav"></div>
            </div> 
            <!--slider-wrapper-->
            <div id="main-home">   
                <div id="main-home-left">
                    <div class="loUltimo-news">
                    <div class="loUltimo-news-headline"><h2>Lo &uacute;ltimo</h2></div>
                        <ul class="loUltimo-news">
                            <li>
                                <div class="loUltimo-news-image">
                                    <a href="#" rel="bookmark" title=""><img width="199" height="140" src="images/noticias/lemondogs-nuevo-mid.jpg" class="attachment-small-thumb wp-post-image" alt=""></a>
                                </div>
                                <div class="loUltimo-news-text">
                                    <a href="#" class="main-headline">Agust&iacute;n "Faint" Ocampo nuevo mid de Lemondogs</a>
                                    <p>La escena deportiva de nuestro continente nos tiene acostumbrados a cambios en los equipos muy seguidos. Lamentablemente, los rosters no duran mucho tiempo juntos y en esta ocasi&oacute;n, el cambio se produjo en uno de los equipos que aparenta...</p>
                                </div><!--headlines-info-->
                            </li>
                            
                            <li>
                                <div class="loUltimo-news-image">
                                    <a href="#" rel="bookmark" title=""><img width="199" height="140" src="images/noticias/lesmart-isg.jpg" class="attachment-small-thumb wp-post-image" alt=""></a>
                                </div>
                                <div class="loUltimo-news-text">
                                    <a href="#" class="main-headline">Le Smart se incorpora a las filas de Isurus Gaming</a>
                                    <p>En el d&iacute;a de ayer, nos caus&oacute; una gran sorpresa (En el mundo del E-Sport Latinoamericano), informarles que el jugador Facundo "Le Smart" Canteros se separa completamente del equipo que lo vi&oacute; nacer y el proyecto Royal Paladin para incorpor...</p>
                                </div><!--headlines-info-->
                            </li>
                            
                            <li>
                                <div class="loUltimo-news-image">
                                    <a href="#" rel="bookmark" title=""><img width="199" height="140" src="images/noticias/lolcave-vs-lgl.jpg" class="attachment-small-thumb wp-post-image" alt=""></a>
                                </div>
                                <div class="loUltimo-news-text">
                                    <a href="#" class="main-headline">Lol Cave vence a LGL Team en la ASL</a>
                                    <p>En el domingazo de la liga tuvimos el placer de mostrarles un encuentro vibrante por donde se lo mire. No le falto absolutamente nada; acci&oacute;n, estrategia y jugadas asombrosas fueron los principales ingredientes entr...</p>
                                </div><!--headlines-info-->
                            </li>
                            
                            <li>
                                <div class="loUltimo-news-image">
                                    <a href="#" rel="bookmark" title=""><img width="199" height="140" src="images/noticias/s3-finals.jpg" class="attachment-small-thumb wp-post-image" alt=""></a>
                                </div>
                                <div class="loUltimo-news-text">
                                    <a href="#" class="main-headline">Lo que dej&oacute; la World's Championship Series S3</a>
                                    <p>En la madrugada de hoy (05/10), se produjo un momento hist&oacute;rico en lo que refiere a eSports a nivel mundial, no por la simple circunstancia de que se jugaba la final del mundial de League of Legends, sino, lo hist&oacute;rico fue que...</p>
                                </div><!--headlines-info-->
                            </li>
                        </ul>
                    <div id="full-news">
                        <a href="#" class="button">Ver todas las noticias</a>
                    </div>                      
                </div><!--loUltimo-news--> 
                
                </div><!--main-home-left-->
            </div><!--main-home-->
        </div><!--main-wrapper-->
    </div><!--content-->
</div><!--site-->
</div><!--wrapper-->
    </body>
</html>

Código CSS:

Ver original/* contenido del header */
 
/* divs contenedores del inicio para las noticias */
#site {
    float: left;
    width: 100%;
}
#wrapper {
    background: url(../images/0rbital_by_nucu.png) no-repeat fixed;
    float: left;
    position: relative;
    width: 100%;
}
#content {
    background: none repeat scroll 0 0 #FFF;
    border-left: 1px solid #111111;
    border-right: 1px solid #111111;
    margin: 100px auto;
    padding: 20px 10px 20px 10px;
    position: relative;
    width: 958px;
}
#main-wrapper {
    float:left;
    width:100%;
}
#main-home {
    background:#FFF;
    float:left;
    width:440px;
}
#main-home-left {
    background: #fff;
    border-right: 1px dotted #ccc;
    float: left;
    margin-right: 20px;
    margin-top:20px;
    padding-right: 19px;
    position: relative;
    width: 420px;
}

pzin · #2 (**permalink**) 31/10/2013, 13:53

No he mirado el código, pero probablemente se solucione con:

Código CSS:

Ver originaldiv#content {
  overflow: hidden;
}

kenyis01 · #3 (**permalink**) 31/10/2013, 13:59

te amo.....

jonni09lo · #4 (**permalink**) 31/10/2013, 14:01

Justamente anoche hice este fiddle para explicarle a alguien el funcionamiento de los floats y los errores comunes que sabemos cometer al no entender bien su funcionamiento.

Necesitas usar overflow:hidden; al contenedor que envuelve los divs que tienen float, para que ocupe todo el alto y envuelva el contenido correctamente.

Saludos