Foros del Web - Ver Mensaje Individual

emprear · #3 (**permalink**) 05/02/2012, 18:22

El problema lo tenes en asignar porcentajes ya que los contenedores no tienen una medida definida.
Si bien yo lo haría todo de otra manera, esto creo corrige tu problema

html

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <div class="divform">
        <p>
            <label for="usuario" class="form">Usuario</label>
            <input type="text" id="usuario">
            <label class="error">Campo obligatorio</label>
        </p>
        
        <p>
            <label for="fecha" class="form">Fecha</label>
            <input type="text" id="fecha">
            <label class="error">Formato dd/mm/aaaa</label>
        </p>
        
        <p>
            <label for="comment" class="form">Comentario</label>
            <textarea id="comment" rows="8"></textarea>
            <label class="error">Max. XXX caracteres</label>
        </p>    
        
        <p>
            <div class="form">Sexo</div>
           <div class="radiobut"> <input type="radio" id="radio_hombre" name="sexo"/>
            <label for="radio_hombre" class="option">Hombre</label>
            <input type="radio" id="radio_mujer" name="sexo"/>
            <label for="radio_mujer" class="option">Mujer</label>
        </div>
            <label class="error">Campo obligatorio</label>
        </p> 
    </div>
</body>
</html>

css

Código CSS:

Ver originalbody{
    margin: 8px;
    font-size: 14px;
    font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helveticam, Verdana;
    color: #444;
}
 
.divform {
width: 600px;
}
p{
    padding-top: 20px;
}
div.radiobut{
    display: inline-block;
    width: 30%;    
padding: 4px 2px; 
}
 
 
 
 
input[type=text], textarea{
    padding: 4px 2px; 
    border: 1px solid #aaa;
    background: #fff;
    width: 30%;
    resize: none;
}
 
label.form, div.form{
    font-size: 14px;
    text-align: right;
    width: 15%;
    float: left;
    margin: .3em 2% 0 0;
}
 
label.option{
    margin-right: 20px;
}
 
.error{
    font-size: 13px;
    padding: 4px 18px;
    color: #D8000C;
    background-color: #FDD5CE;
    border: 1px solid #D8000C;
    margin: 40px;
}

Saludos