[SOLUCIONADO] Problema con div

[jandrogdz]

Buenas foro

Tengo un problema con un div que sin yo decirle que abarque el 100% lo hace.
Es decir si yo le digo que abarque el 40% abarca el 100 en la web y eso no me permite utilizar el float en donde necesito este es mi hoja de estilo.

Código CSS:

@media only screen and (min-width: 769px) {
    body{ background-color: #ececec; }
    input { outline:none; }
    .gridContainer {
        width: 100%;
        max-width: 1224px;
    }
    #LayoutDiv1 {
        width: 100%;
        background-color:#ffffff;
    }
    #sombra{
        width:100%;
        padding:0;
        margin:0;
        margin-bottom:1%;
        box-shadow: 1px 1px 15px 1px #aaaaaa;
    }
    
/*
* estilo para HEADER Y DIV INTERNOS
*/
 
    #header{
        width:100%;
        height:85px;
        background-color:#f1f1f1;
        border-bottom:solid 1px #dddddd;
    }
    #logo {
        height: 75px;
        width: 40.50%;
        float:left;
        margin-top:0;
    }
    
    #info{
        width: 30.50%;
        height:75px;
        float:right;
        margin-right:3%;
        display:block;
    }
    #avatar{
        width:60px;
        height:60px;
        border:solid 1px #dddddd;
        border-radius:5px;
        margin:5px 10px;
        float:left;
    }
    #avatar img{
        width:60px;
        height:60px;
    }
    
    #info p{
        padding:0;
        margin:1.6889%;
        margin-left:1%;
        color:#707070;
        font-size:.9em;
    }
    
    #info span{
        padding:0;
        color:#707070;
        font-size:.9em;
        padding-right:2%;
    }
    
    #info span a{
        color:#707070;
        text-decoration:none;
    }
    #info span a:hover{
        color:#c7cd13;
        text-decoration:none;
    }
    .borde-der { border-right:solid 1px #aaaaaa; }
 
/*
* estilo para LOGIN
*/
    #login { 
        background-color:#eeeeee;
        display:block;
        width:40%;
        border:solid 1px #dddddd;
        border-radius:5px;
        margin:3%;
        background-color:#dcdcdc; 
        box-shadow:1px 1px 5px 1px #999999;
        padding:0;
    } 
    
    #login-titulo{
        width:100%;
        height:60px;
        background: #7fbf24;
        background: -moz-linear-gradient(top, #9fe736 0%, #7fbf24 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9fe736), color-stop(100%,#7fbf24));
        border-radius:5px;
        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #90c33e;
        text-align:center;
        font: bold 2.5em Helvetica, Sans-Serif;
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        text-shadow: 0px 1px 3px #000000;
        line-height:50px;
        display:block;
    }
 
    #cont-textos{
        margin:4%;
    }
    
    #login p{
        display:none;
    }
    #login label{
        width:35%;
        float:left;
        margin-top:1%;
        font-size: 1.24em;
        color:#ffffff;
        text-shadow:1px 1px 1px #999;
        cursor: default;
        font-weight:bold;
    }
    #login input[type="text"], #login input[type="password"]{
        height:35px;
        width:80%;
        border:solid 1px #cccccc;
        border-radius:5px;
        background-color: #f5f5f5;
        color: #aaaaaa;
        padding-left:12%;
        font-weight:900;
        font-size:1.3em;
    }
    
    #login input[type="text"]:hover, #login input[type="password"]:hover, #login input[type="text"]:focus, #login input[type="password"]:focus{
        border:solid 1px #cccccc;
        box-shadow:5px 5px 15px #eeeeee;
    }
    #login input[type="text"]{
        background-image: url('imagenes/icon_user.png');
        background-size: 40px, 40px;
        background-repeat: no-repeat;
        background-position: -1px,0;
    }
 
    #login input[type="password"]{
        background-image: url('imagenes/icon_pwd.png');
        background-size: 40px, 40px;
        background-repeat: no-repeat;
        background-position: -1px,0;
    }
 
    #login input[type="submit"]{
        display: block;
        padding:2%;
        margin-right:8%;
        
        background: #7fbf24;
        background: -moz-linear-gradient(top, #9fe736 0%, #7fbf24 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9fe736), color-stop(100%,#7fbf24));
     
        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #90c33e;
        border-radius: 10px;
     
        font: bold 1.5em Helvetica, Sans-Serif;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        text-shadow: 0px 1px 2px #000000;
    }
    
    #login input[type="submit"]:hover{
        background: #9fe736;
        background: -moz-linear-gradient(top, #7fbf24 0%, #9fe736 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fbf24), color-stop(100%,#9fe736));
    }
 
 
/*
* estilo para BLOQUE DERECHO
*/
    
    #bloque-derecho{
        width:30%;
        height:100px;
        border:solid 1px #aaaaaa;
        border-radius:5px;
        margin:0;
        padding:0;
    }
    
/*
* estilo para FOOTER Y DIV INTERNOS
*/
 
    #footer{
        width: 100%;
        margin:0;   
    }
    #footer span{
        color:#707070;
        font-size:1.1em;
        display:inline;
        padding-left:3%;
    }
    #footer span a{
        color:#707070;
        text-decoration:none;
    }
    #footer span a:hover{
        color:#c7cd13;
        text-decoration:none;
    }
    .floats{ clear:both;}
}
 

y esta es la web donde estoy haciendo el estilo:

http://iconograma.com/sistema/server_pruebas

Espero me puedan apoyar y de antemano muchas gracias.

[pzin]

El título del tema debería de ser un poco más claro.

Y en realidad tu mensaje también ya que al leerlo uno se pregunta: ¿qué div será ese que da problemas?

[jandrogdz]

Una disculpa pense que habia escrito el nombre del div
Es en el div login
#login no me permite utilizar float ya que abarca el 100% cuando deberia de abarcar solo el 40%.

[pzin]

Pues yo lo floto y me respeta el ancho.

[jandrogdz]

Pero por ejemplo el que dice bloque-derecho que esta debajo del formulario deberia de quedar al lado del formulario no debajo y no me permite hacerlo.

[pzin]

Pero no empieces a hacer cambios en la URL que nos diste —ya que la das, será para ir a verla.

[jandrogdz]

Solo vi un par de cosas pero no funciono ya esta como la tenia

[pzin]

Gracias.

El problema viene de div#logo que tiene un flotado a la derecha, y ese flotado hay que limpiarlo luego. Luego ya pones los elementos a flotar y debería de funcionar.

Código CSS:

div#login {
  clear: both;
  float: left;
}
 
div#bloque-derecho {
  float: left;
}
 

[jandrogdz]

Sigue sin funcionar cada que hago un float lo limpio con un div asi:
.floats{ clear:both;}
<div class="floats"></div>

Pero sigue sin funcionarme

asi lo tengo acomodado:

Código HTML:

<body>
<div class="gridContainer clearfix">
 
    <div id="sombra">
        <div id="LayoutDiv1">
            <div id="header">
              <div id="logo"></div>
              <div id="info">
                <div id="avatar"><img src="imagenes/avatar2.png" /></div>
                <p> Bienvenido: $_SESSION['nombre'] </p>
                <p> Cuenta:  $_SESSION['usuario'] </p>
                <span class="borde-der"><a href=""> alertas $_SESSION['cuenta']</a></span>
                <span>&nbsp;&nbsp; <a href="">cerrar sesión</a></span>
              </div>
            </div>
            
          <!-- <div id="menu"></div> -->
            <div id="login">
                <div id="login-titulo">Iniciar sesión</div>
                <div id="cont-login">
                    <p>Ingresa tu nombre de usuario y contraseña en el siguiente formulario.</p>
                    <form action="validar.php" method="post">
                        <label for="usuario">Usuario: </label>
                        <input type="text" name="usuario" required="required" placeholder="usuario.ejemplo" /><br /><br />
                        <label for="usuario">Password: </label>
                        <input type="password" name="password" required="required" placeholder="contraseña"  /><br /><br />
                        <input type="submit" name="session" value="Entrar" />
                    </form>
                </div>
            </div>
            <div id="bloque-derecho">
                bloque-derecho
            </div>
        </div>
      <div class="floats"></div>
    </div>
  <div class="floats"></div>
  
    <div id="footer">
         <span>&copy; 2010-2013 Iconograma Consultores</span>
         <span><a href="terminos.html">Términos y condiciones</a>
         </span>
    </div>
  
</div>
</body>
 

[pzin]

Como mencioné en el mensaje anterior a mi me funcionó.

Otra cosa que podrías hacer, es ponerle a div#header un overflow:hidden, aunque es una solución más chapucera.

[jandrogdz]

El overflow:hidden fue la solucion pero me puedes apoyar con la explicacion de como llegaste a la conclusion de que si se hacia eso funcionaba. no entiendo bien esa propiedad del overflow

De antemano muchas gracias por tus respuestas