...

View Full Version : Problem in IE7 with a floating element. Clearing it doesn’t work.



tirengarfio
07-05-2010, 07:29 PM
Hi,

I have this page (tirengarfio.com).

The register form should be on the right on the sign in form, but it doesn't...

I added "clear:right" to the registering div, but it doesn't work..

Any idea?

Regards

Javi

mbaker
07-05-2010, 08:35 PM
The w3c validator (see link in my sig) reports 89 errors on your page.

How do you know that the problem is not caused by one of these errors?

My advice is never try to fix layout problems before you have eliminated all validation errors.

Michael.

jhaycutexp
07-05-2010, 08:52 PM
Well actually you are partially correct, the thing is the structure and styles..




#formulario_registro {
background:none repeat scroll 0 0 white;
border:1px solid #B9B9B9;
/*clear:right;
margin-left:525px;*/ <--- margin that sets off your div way to the right
padding:9px 12px 29px 30px;
width:346px;


Heres' the HTML structure that I made for you.. I moved the <p> inside the containng div of inicio_sesion.. for grouping purposes..


<div id="contenedor_formularios">
<div id="contenedor_formulario_inicio_sesion">
<div id="formulario_inicio_sesion">
Entra
</div>
<p><a href="#">¿Has olvidado tu contraseña?</a></p>
</div>
<div id="formulario_registro">Regístrate</div>
</div>


Here's the style


#contenedor_formulario_inicio_sesion{width:200px; float:left;}
#formulario_inicio_sesion{border:#010000 1px solid;}
#formulario_registro{width:400px; float:left; border:#010000 1px solid;}


Just copy the form tables inside the divs.. and adjust your width to your liking.. of course the sum of the widths of your divs should not be greater than the containing div contenedor_formularios.. cause that will case the last div which is formulario_registro to be pushed down..

Hope it helps.. :)

mbaker
07-05-2010, 09:05 PM
The following additions will give you a better layout (for all browsers):


<!-- modifications -->
<style type="text/css">
#contenedor_formularios {
width:700px;
}
#contenedor_formulario_inicio_sesion {
float:left;
}
#formulario_registro {
float:right;
margin-left:0;
}
</style>
<!-- end modifications -->

However it would be better to modify your existing stylesheets, rather than make these additions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum