1
resposta

Display inline-block porcentagem

Boa noite!

Estou tentando colocar as duas divs lado a lado, porém não consigo usando 100% da largura.

Quando diminuo uma div um pouco funciona, mas queria entender do motivo de não poder usar os 100% para não cometer erros futuros.

            <div class="caixa-main">
                <div class="abertura">
                    <h2>Compramos seu precatório</h2>
                    <h3>Federal, Estadual ou Munucipal</h3>

                    <p>Seu precatório pode te ajudar nesse momento incerto e nós estamos aqui para mostrar o caminho.</p>

                    <p>Estamos à mais de 10 anos no mercado ajudando pessoas a tranformar a promessa do precatório em dinheiro real.</p>

                    <p>Trabalhamos com o pagamento na hora e à vista, com a transparência acima de tudo.</p>

                    <img class="imagem-dividida" alt="Imagem de uma planta em um vaso de dinheiro" src="abertura.jpg">
                </div> <!--abertura-->

                <div class="formulario">
                    <h2>Consulte o valor do seu precatório</h2>

                    <label for="nome">Nome</label>
                    <input id="nome" type="text" required placeholder="Seu nome completo" class="input-padrao">

                    <label for="email">Email</label>
                    <input id="email" type="email" required placeholder="email@gmail.com.br" class="input-padrao">

                    <label for="telefone">Telefone</label>
                    <input id="telefone" type="tel" required placeholder="(XX) XXXXX-XXXX" class="input-padrao">

                    <label for="mensagem">Deixe a sua dúvida ou observação aqui</label>
                    <textarea id="mensagem" type="text" rows="5" class="input-padrao"></textarea>

                    <fieldset>
                        <legend>Qual horário prefere ser atendido?</legend>
                        <select>
                            <option>Manhã</option>
                            <option>Tarde</option>
                            <option>Noite</option>
                        </select>
                    </fieldset>

                        <label for="whatsapp">Gostaria de receber nosso contato pelo Whatsapp?</label>
                        <input id="whatsapp" type="checkbox" checked>

                    <input class="enviar" type="submit" value="Receba uma proposta">
                </div> <!--formulario-->
            </div> <!--caixa-->
.caixa-main {
    width: 960px;
    margin: 0 auto;
    position: relative;
    background: #CCCCCC;
}

.abertura{
    width: 40%;
    display: inline-block;
    text-align: center;
}

.formulario {
    width: 60%;
    display: inline-block;
    text-align: center;
}
1 resposta

Olá Isabel, quando você usa a largura em %, e essa div não está dentro de uma outra div (uma outra caixa), essa div ocupará 100% de largura da página inteira. Tente fazer isso: na primeira div aberta, defina uma largura para ela, por exemplo, 600px, e de altura 400px, depois coloque uma borda nela (para você visualizar o que estará ocorrendo), e o position dessa primeira div coloque relative. Na próxima div, que estará dentro dessa, coloque o position absolute, coloque uma borda nela e tente usar a porcentagem 100% , entre outras porcentagens.