I need to center two Divs on a main html the Divs are "formRight and formLeft"

Asked

Viewed 38 times

-3

<section id="container">
    <div id="topo">
        <img id="logo" src="_imagens/logo.png" />
    </div>
    <div id="formLeft">
        <form action="" method="post" name="form" id="form">
            <h4 id="cd1">Já sou cadastrado</h4>
            <label id="letra" class="letras">Eu sou:</label>
            <select class="letras" name="verificar">
                <option value="admin">Administrador</option>
                <option value="func">Funcionario</option>
                <option value="user">Usuario</option>
            </select>
            <br>
            <label class="letras">Login:</label>
            <input required="true" id="cadastro" name="Login" type="text" placeholder="Login" value="" spellcheck="false" class="">
            <br>
            <label class="letras">Senha:</label>
            <input required="true" id="password" name="Password" type="password" placeholder="Senha" class="">
            <br>
            <input id="logar" name="Logar" type="submit" value="Entrar">
        </form>
    </div>
    <div id="formRight">
        <form action="" method="post" name="form" id="form2">
            <h4 id="cd2">Quero me cadastrar</h4>
            <input id="cadastro" name="Cadastro" type="submit" value="Cadastrar">
        </form>
    </div>
    <div id="clear"></div>
</section>
  • What have you tried?

1 answer

0

You can do this in many ways, but I believe the best way to solve this in your code structure is as follows::

You can use the float property on the two Divs you want to center, like this:

#formLeft, #formRight {
    float: left;
}

Taking advantage of your code, also add in css the following:

#clear {
    clear: both;
}

This way you avoid that other elements below these two Ivs "float" too.

http://jsfiddle.net/25b1xz61/

Browser other questions tagged

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