Problema con formulario

[maurilop92]

Soy nuevo en este mundo de html y css y este es el primer gran problema con el que me encuentro y realmente no tengo idea de como solucionarlo.

Como se ve:


Como deberia verse:

Código:

HTML

<fieldset id="formulario">
                	<legend>HABITACIONES Y TARIFAS</legend>
                    <label for="check-in">Fecha de Check-in</label><br />
                    <div class="campos">
						<input name="check-in_dia" id="check-in_dia" type="text" value="Dia" size="9" maxlength="3">
                    	<input name="check-in_mes" id="check-in_mes" type="text" value="Mes" size="9" maxlength="3">
                    	<input name="check-in_año" id="check-in_año" type="text" value="Año" size="9" maxlength="4"><br />
                    </div>
                    <label for="check-out">Fecha de Check-out</label><br />
					<div class="campos">	
                        <input name="check-out_dia" id="check-out_dia" type="text" value="Dia" size="9" maxlength="3">
                   		<input name="check-out_mes" id="check-out_mes" type="text" value="Mes" size="9" maxlength="3">
                    	<input name="check-out_año" id="check-out_año" type="text" value="Año" size="9" maxlength="4"><br />
                    </div>
                    <div id="bloque_campo_izq">
                        <label for="habitaciones">Habitaciones</label><br />
                        <div class="campos">	
                            <input name="habitaciones" id="habitaciones" type="text" value="1" size="4" maxlength="2">   
                        </div>
                    </div>
                    <div class="bloque_campos_der">         
                        <label for="niños">Niños</label><br />
                        <div class="campos">
                            <input name="niños" id="niños" type="text" value="1" size="4" maxlength="2">   
                        </div> 
                    </div>
                    <div class="bloque_campos_der">
                        <label for="adultos">Adultos</label><br />
                        <div class="campos">
                            <input name="adultos" id="adultos" type="text" value="1" size="4" maxlength="2">
                    	</div>  
                    </div><br />
                    <a href="buscar.html" id="buscar">BUSCAR</a>  
                </fieldset>

Código:

CSS

#formulario{
	width:287px;
	height:280px;
	border:none;
	float:left;
	background-color:#152773;
	font-size:12px;
	margin-left:77px;
	}
	
	
#formulario legend{
	font-size:18px;
	text-align:center;
	border-bottom:solid 2px;
	}
	
#formulario label, #formulario input{
	float:left;
	border:none;
	}
	
#formulario label{
	padding-left:42px;
	}
	
.campos{
	padding-left:35px;
	}
	
#formulario input{
	color:#999;
	margin-left:9px;
	padding-left:5px;
	}
	
#bloque_campo_izq{
	display:block;
	float:left;
	}
	
.bloque_campos_der{
	float:left;
	width:50px;
}

#buscar{
	float:left;
	margin-top:20px;
	text-align:center;
	text-decoration:none;
	color:#b60718;
	width:110px;
	height:20px;
	background-color:#fff;
	font-size:14px;
	margin-left:90px;
	margin-top:33px;
	}

Solo necesito que se vea lo mas similar posible, el formulario no necesita funcionar.
Saludos y muchas gracias por pasarse.

[malcubas1]

el probelma es el fieldset lo puedes hacer que el #formulario del css se muestre en un div?

[ArturoGallegos]

decidme indiorante pero mi no entender que tiene que ver el que use fieldset en lugar de un div

yo diría que el problema es que declara una altura fija para dicho elemento, debería retirar la altura y dejar que crezca según su contenido, si este no crece por si solo por los elemento flotantes de su interior puede aplicar overflow:hidden

[malcubas1]

Código HTML:

<div id="formulario">
        <div id="nombre_cabecera">
            HABITACIONES Y TARIFAS
         </div>
                    <div style='margin: 5px 0px 5px 15px;'>
                    <table>
                    <tr>
                        <TD>Fecha de Check-in</TD>
                    </tr>
                    <tr>
                    <td><input name="check-in_dia" id="check-in_dia" type="text" value="Dia" size="9" maxlength="3"></td>
                    <td><input name="check-in_mes" id="check-in_mes" type="text" value="Mes" size="9" maxlength="3"></td>
                    <td><input name="check-in_año" id="check-in_año" type="text" value="Año" size="9" maxlength="4"></td>
                    </tr>
 
                    <tr>
                        <TD>Fecha de Check-out</TD>
                    </tr>
                    <tr>
                    <td><input name="check-in_dia" id="check-in_dia" type="text" value="Dia" size="9" maxlength="3"></td>
                    <td><input name="check-in_mes" id="check-in_mes" type="text" value="Mes" size="9" maxlength="3"></td>
                    <td><input name="check-in_año" id="check-in_año" type="text" value="Año" size="9" maxlength="4"></td>
                    </tr>
                    <tr>
                        <TD>Habitaciones</TD>
                        <TD>Niños</TD>
                        <TD>Adultos</TD>
                    </tr>
                    <tr>
                    <td><input name="habitaciones" id="habitaciones" type="text" value="1" size="4" maxlength="2"> </td>
                    <td><input name="niños" id="niños" type="text" value="1" size="4" maxlength="2"></td>
                    <td><input name="adultos" id="adultos" type="text" value="1" size="4" maxlength="2"></td>
                    </tr>
 
                    </table>
                    <br />
                    <a href="buscar.html" id="buscar">BUSCAR</a>  
        </div>
    </div>
 

codigos css

Código CSS:

#formulario{
    width:320px;
    height:280px;
    border:none;
    float:left;
    background-color:#152773;
    font-size:12px;
    margin-left:77px;
    color:#FFF;
    }
#nombre_cabecera{
    margin-top:20px;    
    text-decoration:underline;
    font-weight:bold;
    text-align:center;
    font-size:14px;
    }
    
#formulario label, #formulario input{
    float:left;
    border:none;
    }
    
#formulario input{
    color:#999;
    padding-left:5px;
    }
    
#bloque_campo_izq{
    display:block;
    float:left;
    }
    
.bloque_campos_der{
    float:left;
    width:50px;
}
 
#buscar{
    float:left;
    margin-top:20px;
    text-align:center;
    text-decoration:none;
    color:#b60718;
    width:110px;
    height:20px;
    background-color:#fff;
    font-size:14px;
    margin-left:90px;
    margin-top:33px;
    }
 

[kreil]

Vaya jaleo. Consejos:
- usa divs para colocar las cosas, son más recomendables.
- Intenta evitar en la medida de lo posible los width y height fijos, usa porcentajes.
- Coloca las cosas como si fuesen una tabla (table), pero con divs y jugando con css.
- Si no te funciona nada de esto usa tablas que son más sencillas :D

[maurilop92]

Gracias a todos, en especial a malcubas, pero al final simplemente puse el fromulario como imágen, al fin y al cabo mi profesora me habia dicho de hacerlo así porque aún no dimos formularios, pero yo quise ir un poco mas lejos y mori en la orilla lol. Algún dia aprendere a hacerlo, aparentemente ese dia no es hoy =/.

[pzin]

Menos mal que no era la profesora del mismo quien inventó la máquina de vapor.