CSS - Aline - formulario

http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale:1.0">

    <style>


    #principeira{

    width:50%;
    height:380px;
    border:0px solid black;
    position:absolute;
    top:22%;
    left: 24%;
    background-color:red;

    max-width:960px;/* limita o crescimento do layout a até 960px */

    min-width:300px;

    }

    #secundeira{

    background-color: blue;
    width:95%;
    height:355px;
    border:1px solid black;
    position:relative;
    top:3%;
    left: 2%;


    max-width:960px;/* limita o crescimento do layout a até 960px */

    min-width:300px;

    }

    p {

    line-height:200%;

    }

    #caixa_codigo {

    position:relative;
    left: 0%;
    width: 13%;

    }

    #caixa_nome {

    position:relative;
    left: 0%;
    width: 66%;

    }


    #caixa_endereco{

    position:relative;
    left: 2%;
    width: 86%;

    }

    #caixa_bairro{

    position:relative;
    left: 3%;
    width: 88%;

    }

    #caixa_cep{

    position:relative;
    left:3%;
    width: 30%;

    }

    #caixa_telefone{

    position:relative;
    left: 8%;
    width:41%;

    }

    #caixa_cidade{

    position:relative;
    left:3%;
    width: 29%;

    }

    #caixa_select{

    position:relative;
    left:9%;
    width: 44%;

    }

    #caixa_descricao{

    position:relative;
    margin-top: 1%;
    margin-left: 4%;

    width:80%;


    resize:none;

    }

    #des {

    position:relative;
    maring-top:15%;

    }


    #tel {  position:relative;  left:7%; }
    #est {  position:relative;  left:7%; }


    #botao_cadastro{
    background-color: #00FF00;
    width: 30%;
    height: 60px;
    }

    #botao_excluir{
    background-color: #FF0000;
    width: 30%;
    height: 60px;
    }

    body {

    background-color: #E6E6FA;

    }


    @media screen and (max-width:1330px){

        #botao_cadastro {

            background-color: red;

        }

        #principeira{

            height:500px;
            }

        #secundeira{

            height: 470px;
        }
    }

    @media screen and (max-width:968px){

        #botao_cadastro {

            background-color: green;

        }

        #principeira{

            height:600px;
            }

        #secundeira{

            height: 570px;
        }
    }

    </style>

    <script>
        function limitarCodigo(e){

        var evt = e.charCode;
        var valid_chars = '0123456789';                     // criando a lista de teclas permitidas
        var chr = String.fromCharCode(evt);                 // pegando a tecla digitada
        if (valid_chars.indexOf(chr)>-1 ){return true;}     // se a tecla estiver na lista de permissão permite-a


            return false;   // do contrário nega
        }

        function limitarNome(e){

        var evt = e.charCode;
        var valid_chars = 'abcdefghijlmnopqrstuvxzwykABCDEFGHIJLMNOPQRSTUVXZWYKãçéêõúíÃÇÉÊÕÚÍ';    // criando a lista de teclas permitidas
        var chr = String.fromCharCode(evt);                                                      // pegando a tecla digitada
        if (valid_chars.indexOf(chr)>-1 ){return true;}                                         // se a tecla estiver na lista de permissão permite-a

        if(valid_chars.indexOf(chr)>30 || evt<35) {return true;}                                // Tecla Espaço
            return false;   // do contrário nega
        }

        function limitarCep(e){

        var evt = e.charCode;
        var valid_chars = '0123456789';                     // criando a lista de teclas permitidas
        var chr = String.fromCharCode(evt);                 // pegando a tecla digitada
        if (valid_chars.indexOf(chr)>-1 ){return true;}     // se a tecla estiver na lista de permissão permite-a


            return false;   // do contrário nega
        }

        function limitarTelefone(e){

        var evt = e.charCode;
        var valid_chars = '0123456789';                     // criando a lista de teclas permitidas
        var chr = String.fromCharCode(evt);                 // pegando a tecla digitada
        if (valid_chars.indexOf(chr)>-1 ){return true;}     // se a tecla estiver na lista de permissão permite-a


            return false;   // do contrário nega
        }

</script>


</head>
<body>

    <br>
        <center> <h1> CADASTRANDO O CADASTRO </h1> </center>

        <form type="submit">
    <div id="principeira">
      <div id="secundeira">


                <p>
                Codigo*: <input type="text" id="caixa_codigo" required="required" maxlength="5" onKeyPress="return limitarCodigo(event);"></input>
                Nome*: <input type="text"  id="caixa_nome"required="required" onKeyPress="return limitarNome(event)"/>

                Endereco: <input type="text"  id="caixa_endereco"/> <br>
                Bairro:  <input type="text"  id="caixa_bairro"/><br>
                CEP*:  <input type="text"  required="required" id="caixa_cep" onKeyPress="return limitarCep(event)"/>
                <a id="tel">Telefone*:</a>  <input type="tel"  required="required" id="caixa_telefone" onKeyPress="return limitarTelefone(event)"/><br>
                Cidade:  <input type="text"   id="caixa_cidade"/>
                <a id="est">Estado:</a>
                <select id="caixa_select">
                    <option> Selecione </option>
                    <option> Acre </option>
                    <option> Alagoas </option>
                    <option> Amapa </option>
                    <option> Amazonas </option>
                    <option> Bahia </option>
                    <option> Distrito Federal </option>
                    <option> Espirtio Santo </option>
                    <option> Goias </option>
                    <option> Maranhao </option>
                    <option> Mato Grosso </option>
                    <option> Mato Grosso do Sul </option>
                    <option> Minas Gerais </option>
                    <option> Para </option>
                    <option> Paraiba </option>
                    <option> Parana </option>
                    <option> Pernambuco </option>
                    <option> Piaui </option>
                    <option> Rio de Janeiro </option>
                    <option> Rio Grande do Norte </option>
                    <option> Rio Grande do Sul </option>
                    <option> Rondonia </option>
                    <option> Roraima </option>
                    <option> Santa Catarina </option>
                    <option> Sao Paulo </option>
                    <option> Sergipe </option>
                    <option> Tocantins </option>
                </select> <br>

                <a id="des"> Descrição: </a>  <textarea id="caixa_descricao" placeholder="Insira aqui informações adicionais..."  rows="5" cols="70"></textarea>


                </p>

                <center>

                <input type="reset" id="botao_excluir" value="Limpar"></input>
                <input type="submit" id="botao_cadastro" value="Cadastrar"></input>

                </center>
      </div>
    </div>
    </form>


</center>
</body>
</html>