How to make a div be positioned as a block in the middle of another div?

Question

How to make a div be positioned as a block in the middle of another div?

Asked 5 years, 8 months ago

Viewed 136 times

1

At first, the question may sound strange, but my problem is this::

So far, I own the screen below:

But what I want to do is create a block, like the one of the structure circled below, like a blog or something like:

The CSS that I made of this div and the one that’s underneath so far is this:

.lateralesquerda{ /*bloco da aba lateral com as informações de contato*/
    display: block;
    width: 15%;
    border-right: 1px dotted;
    float: left;
    background-color: #b0c4de;
    margin-top: -15pt;
    margin-left:-6pt;
}
.lateraldireita{ /*bloco da lateral que agirá como um blog*/
    position: relative;
}
.experiencia{ /*bloco que quero deixar no meio do bloco direito*/
     position: relative;
     display: block;
     width: 50%
     top: 20pt;
     left: 20pt;
     padding: 0pt;
     margin: 0pt;
     background-color: white;
 }

And this is my HTML structure:

<body>
        <div class="lateralesquerda">
            <div class="descricao">
                <figure>
                    <img src="./_img/teste.jpg" alt="Arthur Siqueira"/>
                    <figcaption>
                        <h3>Arthur Siqueira</h3>
                        <p>Estudante de Engenharia de Software</p>
                    </figcaption>
                </figure>
                <div class="blocosesq biografia">
                    <p class="biografia">Estudante de Engenharia de Software na Univates.</p>
                    <p class="biografia">Iniciante no desenvolvimento Web</p>
                </div>
            </div>

            <div class="blocosesq contato">

                <div class="fone">
                    <p>(00) 0 0000-0000</p>
                    <h5>Mobile</h5>
                </div>

                <div class="email">
                    <p>email1</p>
                    <h5>Pessoal</h5>

                    <p>email2</p>
                    <h5>Institucional</h5>
                </div>
            </div>

            <div class="blocosesq endereco">
                <p>cidade</p>
                <p>cep</p>
                <h5>Endereço residencial</h5>

                <p>cidade</p>
                <p>cep</p>
                <h5>Endereço para contato</h5>
            </div>
            <div class="blocosesq habilidades">
                <h5>Habilidades Profissionais</h5>
                A <progress value="60" max="100"></progress>
                B <progress value="25" max="100"></progress>
                C <progress value="10" max="100"></progress>
                D <progress value="20" max="100"></progress>
                E <progress value="30" max="100"></progress>
            </div>
    </div>
    <aside class="lateraldireita">
        <div class="experiencia">
        <h3>Experiências Profissionais</h3>
        Experiencia profissional        
     </div>
        <div class="educacao">
            <h3>Educação</h3>

            <div class="curso">
                Engenharia de Software - Univates
                AGO 2018 - CURSANDO
            </div>
            <div class="curso">
                Técnico em Informática - Escola Estadual de Educação Profissional Estrela - EEEPE
                JAN 2014 - DEZ 2018
            </div>
        </div>
        <div class="interesses">
            <h3>Interesses</h3>
            <i class="fas fa-guitar"></i>
            <i class="fas fa-code"></i>
            <i class="fas fa-plane"></i>
            <i class="fas fa-book"></i>
            <i class="fas fa-gamepad"></i>
        </div>
    </aside>
        <footer>
        </footer>
    </body>

Thank you for the aid

1

Face without seeing the structure of your HTML does not help you much. Edit your question and include tb the HTML code

– hugocsl

2019/03/13 at 15:02
Added. Thank you for contributing.

– Arthur Siqueira

2019/03/13 at 15:13

1 answer

Browser other questions tagged html css html5 css3

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

by hugocsl • **65,517** points · Answer 1 · 2019-03-13T15:23:22+00:00

Guy basically missed a float:left in class .lateraldireita

.lateraldireita {
    position: relative;
    float: left;
}

Code

OBS: Like you haven’t done the @media to treat the responsiveness here the layout will get broken, but display in full page to see the result there

.lateralesquerda{ /*bloco da aba lateral com as informações de contato*/
    display: block;
    width: 15%;
    border-right: 1px dotted;
    float: left;
    background-color: #b0c4de;
    margin-top: -15pt;
    margin-left:-6pt;
}
.lateraldireita{ /*bloco da lateral que agirá como um blog*/
    position: relative;
    float: left;
}
.experiencia{ /*bloco que quero deixar no meio do bloco direito*/
     position: relative;
     display: block;
     width: 50%;
     top: 20pt;
     left: 20pt;
     padding: 0pt;
     margin: 0pt;
     background-color: white;
 }

<div class="lateralesquerda">
    <div class="descricao">
        <figure>
            <img src="./_img/teste.jpg" alt="Arthur Siqueira" />
            <figcaption>
                <h3>Arthur Siqueira</h3>
                <p>Estudante de Engenharia de Software</p>
            </figcaption>
        </figure>
        <div class="blocosesq biografia">
            <p class="biografia">Estudante de Engenharia de Software na Univates.</p>
            <p class="biografia">Iniciante no desenvolvimento Web</p>
        </div>
    </div>

    <div class="blocosesq contato">

        <div class="fone">
            <p>(00) 0 0000-0000</p>
            <h5>Mobile</h5>
        </div>

        <div class="email">
            <p>email1</p>
            <h5>Pessoal</h5>

            <p>email2</p>
            <h5>Institucional</h5>
        </div>
    </div>

    <div class="blocosesq endereco">
        <p>cidade</p>
        <p>cep</p>
        <h5>Endereço residencial</h5>

        <p>cidade</p>
        <p>cep</p>
        <h5>Endereço para contato</h5>
    </div>
    <div class="blocosesq habilidades">
        <h5>Habilidades Profissionais</h5>
        A <progress value="60" max="100"></progress>
        B <progress value="25" max="100"></progress>
        C <progress value="10" max="100"></progress>
        D <progress value="20" max="100"></progress>
        E <progress value="30" max="100"></progress>
    </div>
</div>
<aside class="lateraldireita">
    <div class="experiencia">
        <h3>Experiências Profissionais</h3>
        Experiencia profissional
    </div>
    <div class="educacao">
        <h3>Educação</h3>

        <div class="curso">
            Engenharia de Software - Univates
            AGO 2018 - CURSANDO
        </div>
        <div class="curso">
            Técnico em Informática - Escola Estadual de Educação Profissional Estrela - EEEPE
            JAN 2014 - DEZ 2018
        </div>
    </div>
    <div class="interesses">
        <h3>Interesses</h3>
        <i class="fas fa-guitar"></i>
        <i class="fas fa-code"></i>
        <i class="fas fa-plane"></i>
        <i class="fas fa-book"></i>
        <i class="fas fa-gamepad"></i>
    </div>
</aside>
<footer>
</footer>