Problem with a div in IE6/7. No problem in FF/IE8


i have this page.

login: fer
password: m
Note: after login you will be redirected to another page. Then click again the link i mention.

In FF/IE8 it works OK, but in IE6/7 the panel “Amigos” goes down…

Any idea?



Not tested.

Old IEs have problems properly shrink-wrapping float elements. Try applying a width to the floats.



Hhi, you have a right float inside of a left float and iE doesn’t like that.

Chnge the float direction


Although you would need to re arrange your HTML because now the link will be on the left :slight_smile:

Thanks, but I want my link “Editar mi perfil” on the right (between the personal data and the panel “Amigos”)…:rolleyes:

You need to rethink you would would do it then. I’m just merely telling you the issue ;). You could have the container b e float right (you’d need to switch up the HTML source) that way it doesn’t succumb to the bug.

Hi Javi,

Give “datos” this div with approx 350px.

Ok, i finally put inside the same div, “Fernando Salgado Alonso” (float: left) and “Editar mi perfil” (float: right).

But know, when i add a “clear: both” for the div below, i get a big gap between “Fernando Salgado Alonso________Editar mi perfil” and “Fecha de nacimiento”.

Here you have the page again.

Check it using FF.

Any idea?

Hi, that’s because it’s clearing hte image (since you set clear:both).

You really only need to clear from the right floated element to get this working (clearing the left as well will trigger what you are seeing)


Thanks Ryan it works, but when i give a larger size to the font,

#nombre_apellidos {

“Fecha de nacimiento” moves again…

Check the link again if you want.


Nope. Same bug as before. You have a right floated element inside a left floated



Remove the float from the left side text and change the html so that the right float comes first.


<div id="datos">
            <div id="ultimo_logeo">2010-03-29 06:03:29</div>
            <div id="datos_personales">
              [B]  <div id="cabecera_derecha"> <a href="/rs/web/frontend.php/miembros/edit/id/1">Editar mi perfil</a> </div>[/B]
                <div id="nombre_apellidos"> Fernando Salgado Alonso </div>
                <div id="fecha_de_nacimiento"> Fecha de nacimiento </div>
                <div id="edad">1990-01-01                (20 a&#241;os)</div>
                <div id="provincia">Madrid</div>
                <div id="localidad">Alcorcon</div>
                <div id="actualizacion_perfil">Ultima vez que actualizaste tu perfil: 2010-03-29 06:03:29 </div>


#nombre_apellidos {
[B]    /*float:left;*/[/B]

#panel_perfil {
    float: left;
[B]    width:520px;/* ie6 needs a width here*/[/B]

That section of html is suffering badly from divitus and anonymous inline boxes.:slight_smile:


<[B]div[/B] id="provincia">Madrid</[B]div[/B]>
[B] Localidad[/B]
[B]<div [/B]id="localidad">Alcorcon<[B]/div[/B]>

Everything should be in a suitable semantic container


<p id="provincia">Madrid</p>
<p id="localidad">Alcorcon</p>

Only use divs when there are no other suitable elements or you want to divide a page into logical divisions.

If you use appropriate elements you can often lose the classes and ids as you can target more specifically.


<div id="nombre_apellidos"> Fernando Salgado Alonso </div>

or much better as this seems to be a heading:

<h3> Fernando Salgado Alonso </h3>

Hope that helps :wink:

Thanks again Ryan, but adding that, “Fecha de nacimiento” is not in its place…I have tried to solve it with


but “Fecha de nacimiento” goes down again…

See my post above as it fixes this issue for you :slight_smile:

Thanks, works!

so the order of html can matter so much… any place where could i read something about that? :confused:

It’s just the way that floats work.:slight_smile:

They float from the position they find themselves in. They won’t rise up against block level content above it in the html (unless that is a float also). Only the following content wraps a float. Therefore if you want content to wrap a float then the float must come first (apart form inline content on the same line but IE less than 8 gets that wrong anyway so it’s best to say floats must come first).