Problema con float y anchura 100%

kiM- · #1 (**permalink**) 04/05/2011, 08:23

Buenas, pués resulta que estoy haciendo una web, y tengo un menú de 255px a la izquierda, y y quiero que al lado esté el contenido a 100% de anchura a la misma altura (float right y left respectivamente), pero resulta que si lo pongo al 100% en vez de quedar flotando se queda debajo, como si no añadiera la propiedad float, os dejo el código a ver si me podeis echar una mano:

CSS:

Cita:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow: hidden;
}
#global {
width: 100%;
overflow: hidden;
}
#logo_bg {
background-image: url(images/bg_logo.png);
height: 372px;
width: 100%;
}
#logo {
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center center;
height: 372px;
width: 100%;
}
#menu_bar {
background-image: url(images/bar.png);
height: 38px;
width: 100%;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #666;
border-bottom-color: #666;
}
#bar_text {
height: 38px;
width: 100%;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#content_all {
width: 100%;
overflow: hidden;
}
#news_right {
float: right;
width: 100%;
}
#menu_left {
float: left;
width: 250px;
}

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web</title>
</head>

<body>
<div id="global">
<div id="logo_bg">
<div id="logo"></div>
</div>
<div id="menu_bar">
<div id="bar_text"></div>
</div>
<div id="content_all">
<div id="menu_left">Colocar aquí el contenido para id "menu_left"</div>
<div id="news_right">Colocar aquí el contenido para id "news_right"</div>
</div>
</div>
</body>
</html>

Saludos y gracias de antemano!^^

samplei · #2 (**permalink**) 04/05/2011, 09:14

El problema es que #news_right tiene un ancho de 100%. Lo mismo ancho tiene #content_all.
Por eso a lado izquirda de #news_right no hay espacio para otro "div". Por eso te parece que el float-right no funciona.

Tienes que cambiar tu css.
Por ejemplo:

Código:

#news_right {
float: right;
width: 50%;
}
#menu_left {
float: left;
width: 50%;
}

o (pero para mi el primer ejemple es mejor)

Código:

#news_right {
float: right;
width: 255px;
}
#menu_left {
float: left;
width: 255px;
}

kiM- · #3 (**permalink**) 04/05/2011, 14:05

No, a ver, yo lo que quiero es que el menú tenga esos 255px de ancho, ni más ni menos, y que el contenido (content_all y new_right) tengan un tamaño de 100% para que se adaptan a cualquier resolución, es decir que con el cambio de reoslución solo se modifique la anchura de content_all / news_rught y que a la vez esten flotando para que queden iguales.. ¿No hay algo que se pueda hacer?

Saludos y gracias por responder!

elbuensaint · #4 (**permalink**) 04/05/2011, 15:13

Quitale el width:100% y el float:right.
No puedes usar el 100% de ancho por que otro elemento ya esta ocupando parte de ese 100% (el div con 255px de ancho), pero si no defines el ancho el div se adaptará al espacio que queda.

kiM- · #5 (**permalink**) 04/05/2011, 15:21

¿Entonces cómo hago para que el menú se quede de ese tamaño y el div del contenido derecho se estire dependiendo de la resolución que uses? (ej: http://www.pokemonenergy.org/), en la web del ejemplo lo han conseguido, he mirado su código fuente y no he encontrado ninguna manera... ¿Nadie más sabe? :\

Saludos.

elbuensaint · #6 (**permalink**) 04/05/2011, 15:55

Cita:

Iniciado por elbuensaint

Quitale el width:100% y el float:right.
No puedes usar el 100% de ancho por que otro elemento ya esta ocupando parte de ese 100% (el div con 255px de ancho), pero si no defines el ancho el div se adaptará al espacio que queda.

Me cito a mi mismo, solo debes quitar el width y el float del div del contenido derecho, el div del menu de la izquierda se queda con el ancho y float definidos, esto hara que el div del contenido ajuste su ancho a la resolución del usuario.

kiM- · #7 (**permalink**) 04/05/2011, 16:14

Efectivamente, gracias. Pero tengo otro problema y es que teniendo el menú en float:left y el contenido de news_right sin float y sin tamaño definido se me superpone (aunque detrás del mismo menú) y eso hace que al querer poner otro div dentro de news_right con un tamaño del 50% y centrado no se centre bien ya que el div no empieza donde acaba el menu sino que está detrás, no sé si me he explicado, espero que sí. He probaddo con la propiedad padding-left: 250px; (que es lo que mide el menú) pero al poner dentro un div no se centra bien y se coloca más hacia la derecha, ¿hay alguna solución?

Saludos y gracias de nuevo

elbuensaint · #8 (**permalink**) 04/05/2011, 16:53

No te entiendo muy bien, sería de gran ayuda (para ayudarte) si subieras el archivo a algún servidor para verlo en el navegador.

Alucine · #9 (**permalink**) 05/05/2011, 08:47

Hola, elbuensanto :) he estado probando lo que dices en este y otro post sobre los divs flotantes, simplemente poniendo 3 divs, uno float right otro left y el otro sin widht ni float, quedan bien organizados uno al lado del otro pero lo que sucede es que el div que queda en el medio ocupa todo el ancho del div contenedor general (el que tiene el tamaño de la web) y si quiero poner un padding o algun otro efecto (color, borde) lo aplica a todo el ancho lo cual no está bueno :) me podrías decir qué estoy haciendo mal?

Gracias!

Este es todo el codigo:

#contenidocentral {
background-color: #CFC;
height: 100px;
}
.textoendivs {
border: thin dotted #666;
}
#menu {
width: 200px;
float: left;
height: 100px;
background-color: #CF0;
}
#links {
width: 200px;
height: 100px;
background-color: #6F6;
float: right;
}
#web {
width: 900px;
background-color: #F06;
height: 600px;
}
</style>
</head>

<body>
<div id="web">
<div class="textoendivs" id="menu">
<p>NOSOTROS TRABAJO CONTACTO</p>
</div>
<div class="textoendivs" id="links">
<p>google.com yahoo.com linkedin.com facebook.com hotmail.com design.com everythingnow.com</p>
</div>
<div class="textoendivs" id="contenidocentral">Somos una pequeña empresa dedicada al diseño y publicación de páginas web. Nuestro objetivo es ofrecer productos de calidad, con diseños personalizados de acuerdo a su actividad, ya sea trabajo profesional o pequeña empresa. Con sus sugerencias definimos el estilo de su página web e incluimos en ella todos los elementos que le sean necesarios para su eficaz funcionamiento. </div>
</div>
</body>
</html>

-----------

ok, lo logré agregandole al div del medio un margin left y right hasta que quedó del tamaño correcto, entre los otros dos divs. Entonces la pregunta sería, hay otra forma de hacerlo, "más correcta"? :D

elbuensaint · #10 (**permalink**) 05/05/2011, 10:36

vaya, nunca lo había aplicado con bordes/padding/margin hehe pero al parecer la forma que dices es la única solución (o por lo menos lo único que se me ocurre hasta ahora haha)... seguiré buscando otra forma, pero no me parece que esta sea "incorrecta" :P

Alucine · #11 (**permalink**) 05/05/2011, 13:33

Cita:

Iniciado por elbuensaint

vaya, nunca lo había aplicado con bordes/padding/margin hehe pero al parecer la forma que dices es la única solución (o por lo menos lo único que se me ocurre hasta ahora haha)... seguiré buscando otra forma, pero no me parece que esta sea "incorrecta" :P

Mira, he encontrado esto: [URL="http://www.glish.com/css/7.asp"]http://www.glish.com/css/7.asp[/URL]A mí no me queda tan chulo jajaj todavía no me salió con la columna del medio fluida, pero lo que veo en el código es que también han especificado el margin; en el css y otra vez en el html.

Quizás a la persona que inició el post también le sirva ese link... y a la derecha, en "Other Layout Techniques", hay más opciones.

elbuensaint · #12 (**permalink**) 05/05/2011, 13:42

si, supongo que es la manera mas viable de hacerlo (si no es que la única), solo hay que tomar en cuenta los borders, padding y margin de las capas laterales para sumarlos a los margenes que tendrá el div del centro.