How to align a form next to an iframe?

Asked

Viewed 50 times

0

I wanted my form to start next to the map I put on the page, but I can’t.

Just follow my code.

<!-- Mapa -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.457702373701!2d-46.59852440280554!3d-23.55199958841972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5934268f4b49%3A0x40797b77e036a886!2sRua+Taquari%2C+546+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03166-000!5e0!3m2!1spt-BR!2sbr!4v1555292243086!5m2!1spt-BR!2sbr" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

<!-- Cadastro -->   
    <section style="height: 100vh" class="bg-warning">
        <div class="container">
            <h1 class="titulo text-center">Cadastro</h1>

            <div class="row justify-content-md-center">
                <div class="col-md-4">
                    <form name="form1" action="" method="post">
                        <div class="form-group">
                            <label>Nome</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user"></i>
                                    </span>
                                </div>
                                <input type="text" name="nome" class="form-control" placeholder="Digite seu nome" />
                            </div>                                
                        </div>
                        <div class="form-group">
                            <label>Endereço</label>
                            <input type="text" name="endereco" class="form-control" placeholder="Digite seu endereço" />
                        </div>                            
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>CEP</label>
                                    <div class="input-group">
                                        <input type="text" name="cep" class="form-control" required />
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-danger">
                                                Buscar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Telefone</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">     
                                                <i class="fa fa-phone"></i>
                                            </span>
                                        </div>
                                        <input type="text" name="tel1" class="form-control" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Estado</label>
                            <select name="estado" class="form-control" placeholder="Selecione o estado">
                                <option value="ac">Acre</option> 
                                <option value="al">Alagoas</option> 
                                <option value="am">Amazonas</option> 
                                <option value="ap">Amapá</option> 
                                <option value="ba">Bahia</option> 
                                <option value="ce">Ceará</option> 
                                <option value="df">Distrito Federal</option> 
                                <option value="es">Espírito Santo</option> 
                                <option value="go">Goiás</option> 
                                <option value="ma">Maranhão</option> 
                                <option value="mt">Mato Grosso</option> 
                                <option value="ms">Mato Grosso do Sul</option> 
                                <option value="mg">Minas Gerais</option> 
                                <option value="pa">Pará</option> 
                                <option value="pb">Paraíba</option> 
                                <option value="pr">Paraná</option> 
                                <option value="pe">Pernambuco</option> 
                                <option value="pi">Piauí</option> 
                                <option value="rj">Rio de Janeiro</option> 
                                <option value="rn">Rio Grande do Norte</option> 
                                <option value="ro">Rondônia</option> 
                                <option value="rs">Rio Grande do Sul</option> 
                                <option value="rr">Roraima</option> 
                                <option value="sc">Santa Catarina</option> 
                                <option value="se">Sergipe</option> 
                                <option value="sp">São Paulo</option> 
                                <option value="to">Tocantins</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Comentários</label>
                            <textarea name="comentarios" class="form-control" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Sexo</label>
                            <br />
                            <label>
                                <input type="radio" name="sexo" value="M" /> Masculino
                            </label>
                            <label>
                                <input type="radio" name="sexo" value="F" /> Feminino
                            </label>
                            <label>
                                <input type="radio" name="sexo" value="O" /> Outros
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="chkAtivo" value="1" /> Ativo
                            </label>
                        </div>
                        <hr />
                        <div class="pull-right">
                            <input type="submit" class="btn btn-primary" value="Enviar" />
                            <input type="reset" class="btn btn-primary" value="Limpar" />
                        </div>                            
                    </form>
                </div>
            </div>                
        </div>
    </section>

2 answers

0

One way is by using float: left and a margin-right to give a spacing:

iframe{
   float: left;
   margin-right: 30px;
}
<!-- Mapa -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.457702373701!2d-46.59852440280554!3d-23.55199958841972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5934268f4b49%3A0x40797b77e036a886!2sRua+Taquari%2C+546+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03166-000!5e0!3m2!1spt-BR!2sbr!4v1555292243086!5m2!1spt-BR!2sbr" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

<!-- Cadastro -->   
 <section style="height: 100vh" class="bg-warning">
     <div class="container">
         <h1 class="titulo text-center">Cadastro</h1>

         <div class="row justify-content-md-center">
             <div class="col-md-4">
                 <form name="form1" action="" method="post">
                     <div class="form-group">
                         <label>Nome</label>
                         <div class="input-group">
                             <div class="input-group-prepend">
                                 <span class="input-group-text">
                                     <i class="fa fa-user"></i>
                                 </span>
                             </div>
                             <input type="text" name="nome" class="form-control" placeholder="Digite seu nome" />
                         </div>                                
                     </div>
                     <div class="form-group">
                         <label>Endereço</label>
                         <input type="text" name="endereco" class="form-control" placeholder="Digite seu endereço" />
                     </div>                            
                     <div class="row">
                         <div class="col-md-5">
                             <div class="form-group">
                                 <label>CEP</label>
                                 <div class="input-group">
                                     <input type="text" name="cep" class="form-control" required />
                                     <div class="input-group-append">
                                         <button type="button" class="btn btn-danger">
                                             Buscar
                                         </button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="col-md-7">
                             <div class="form-group">
                                 <label>Telefone</label>
                                 <div class="input-group">
                                     <div class="input-group-prepend">
                                         <span class="input-group-text">     
                                             <i class="fa fa-phone"></i>
                                         </span>
                                     </div>
                                     <input type="text" name="tel1" class="form-control" />
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
                         <label>Estado</label>
                         <select name="estado" class="form-control" placeholder="Selecione o estado">
                             <option value="ac">Acre</option> 
                             <option value="al">Alagoas</option> 
                             <option value="am">Amazonas</option> 
                             <option value="ap">Amapá</option> 
                             <option value="ba">Bahia</option> 
                             <option value="ce">Ceará</option> 
                             <option value="df">Distrito Federal</option> 
                             <option value="es">Espírito Santo</option> 
                             <option value="go">Goiás</option> 
                             <option value="ma">Maranhão</option> 
                             <option value="mt">Mato Grosso</option> 
                             <option value="ms">Mato Grosso do Sul</option> 
                             <option value="mg">Minas Gerais</option> 
                             <option value="pa">Pará</option> 
                             <option value="pb">Paraíba</option> 
                             <option value="pr">Paraná</option> 
                             <option value="pe">Pernambuco</option> 
                             <option value="pi">Piauí</option> 
                             <option value="rj">Rio de Janeiro</option> 
                             <option value="rn">Rio Grande do Norte</option> 
                             <option value="ro">Rondônia</option> 
                             <option value="rs">Rio Grande do Sul</option> 
                             <option value="rr">Roraima</option> 
                             <option value="sc">Santa Catarina</option> 
                             <option value="se">Sergipe</option> 
                             <option value="sp">São Paulo</option> 
                             <option value="to">Tocantins</option>
                         </select>
                     </div>
                     <div class="form-group">
                         <label>Comentários</label>
                         <textarea name="comentarios" class="form-control" rows="4"></textarea>
                     </div>
                     <div class="form-group">
                         <label>Sexo</label>
                         <br />
                         <label>
                             <input type="radio" name="sexo" value="M" /> Masculino
                         </label>
                         <label>
                             <input type="radio" name="sexo" value="F" /> Feminino
                         </label>
                         <label>
                             <input type="radio" name="sexo" value="O" /> Outros
                         </label>
                     </div>
                     <div class="form-group">
                         <label>
                             <input type="checkbox" name="chkAtivo" value="1" /> Ativo
                         </label>
                     </div>
                     <hr />
                     <div class="pull-right">
                         <input type="submit" class="btn btn-primary" value="Enviar" />
                         <input type="reset" class="btn btn-primary" value="Limpar" />
                     </div>                            
                 </form>
             </div>
         </div>                
     </div>
 </section>

  • Thank you !!!!!!

  • You are welcome, but you can only mark one answer. Checking one unchecks the other. :)

0


There is more than one way to arrive at the expected result... The form I used was through the display: flex with the property justify-content: space-between that leaves the child elements next to each other with a space between them. See in the example:

.flex{
display: flex;
justify-content: space-between;
}
<div class="flex">
<!-- Mapa -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.457702373701!2d-46.59852440280554!3d-23.55199958841972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5934268f4b49%3A0x40797b77e036a886!2sRua+Taquari%2C+546+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03166-000!5e0!3m2!1spt-BR!2sbr!4v1555292243086!5m2!1spt-BR!2sbr" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

<!-- Cadastro -->   
    <section style="height: 100vh" class="bg-warning">
        <div class="container">
            <h1 class="titulo text-center">Cadastro</h1>

            <div class="row justify-content-md-center">
                <div class="col-md-4">
                    <form name="form1" action="" method="post">
                        <div class="form-group">
                            <label>Nome</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user"></i>
                                    </span>
                                </div>
                                <input type="text" name="nome" class="form-control" placeholder="Digite seu nome" />
                            </div>                                
                        </div>
                        <div class="form-group">
                            <label>Endereço</label>
                            <input type="text" name="endereco" class="form-control" placeholder="Digite seu endereço" />
                        </div>                            
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>CEP</label>
                                    <div class="input-group">
                                        <input type="text" name="cep" class="form-control" required />
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-danger">
                                                Buscar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Telefone</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">     
                                                <i class="fa fa-phone"></i>
                                            </span>
                                        </div>
                                        <input type="text" name="tel1" class="form-control" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Estado</label>
                            <select name="estado" class="form-control" placeholder="Selecione o estado">
                                <option value="ac">Acre</option> 
                                <option value="al">Alagoas</option> 
                                <option value="am">Amazonas</option> 
                                <option value="ap">Amapá</option> 
                                <option value="ba">Bahia</option> 
                                <option value="ce">Ceará</option> 
                                <option value="df">Distrito Federal</option> 
                                <option value="es">Espírito Santo</option> 
                                <option value="go">Goiás</option> 
                                <option value="ma">Maranhão</option> 
                                <option value="mt">Mato Grosso</option> 
                                <option value="ms">Mato Grosso do Sul</option> 
                                <option value="mg">Minas Gerais</option> 
                                <option value="pa">Pará</option> 
                                <option value="pb">Paraíba</option> 
                                <option value="pr">Paraná</option> 
                                <option value="pe">Pernambuco</option> 
                                <option value="pi">Piauí</option> 
                                <option value="rj">Rio de Janeiro</option> 
                                <option value="rn">Rio Grande do Norte</option> 
                                <option value="ro">Rondônia</option> 
                                <option value="rs">Rio Grande do Sul</option> 
                                <option value="rr">Roraima</option> 
                                <option value="sc">Santa Catarina</option> 
                                <option value="se">Sergipe</option> 
                                <option value="sp">São Paulo</option> 
                                <option value="to">Tocantins</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Comentários</label>
                            <textarea name="comentarios" class="form-control" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Sexo</label>
                            <br />
                            <label>
                                <input type="radio" name="sexo" value="M" /> Masculino
                            </label>
                            <label>
                                <input type="radio" name="sexo" value="F" /> Feminino
                            </label>
                            <label>
                                <input type="radio" name="sexo" value="O" /> Outros
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="chkAtivo" value="1" /> Ativo
                            </label>
                        </div>
                        <hr />
                        <div class="pull-right">
                            <input type="submit" class="btn btn-primary" value="Enviar" />
                            <input type="reset" class="btn btn-primary" value="Limpar" />
                        </div>                            
                    </form>
                </div>
            </div>                
        </div>
    </section>
    </div>

  • Thanks and thanks for the explanation.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.