How to put a div in the middle of two elements inside another div?

Asked

Viewed 950 times

0

Galley,

How do I place a text from a div in the middle of another div that has two separate photos.

<div>
<img>
<img>
</div>

<div>
<p></p>
<div>

Yellow and green are the Divs

Foto 1

I need it to look like this image

inserir a descrição da imagem aqui

Note: I cannot change the html order by putting the text before, or inside the div along with the photos.

I tried to move photo 2 with margim top down, and then move the text with margin negative top, but everything was out of place, because the images and text are huge.

html css

  • can’t change the order but need to put elsewhere? difficult so, just imagine putting position: absolute in div with the text and positioning using margin-top, Still it won’t be all pretty, you’ll need to put margin in the second div, it would be better to put everything in the right position and avoid this "adjustments"

  • What is the need to keep order this way? Follow the development pattern, the only problem I see is the logic that is following.

  • Calm down guys, sometimes it’s a dynamically generated html that he doesn’t have access to, he can only mess with css, or some wordpress template and stuff. But it may be that to do yes only in CSS...

  • And the gray box is what? These Divs are inside a section or some other parent div?

  • So, I’m at my job right now and I’m editing this page https://www.superestagios.com.br/index/cadastroEmpresa.php I need to fix the RESPONSIVE part, I divided the photo on the left into two parts and I need to put the questionnaire between the two, If the questionnaire doesn’t go down, it can’t. Give an inspect there on the page, and look at the responsive part

  • I can not change the order pq the page when it is not resposiva, are next to each other, so the elements needed to be separate...

Show 1 more comment

1 answer

0


Face I’ll give you an example, but what is the chance it will work in your project.... almost none, because there is a lot there that can mess up the layout, even because of the positions:absolut

Notice that first the pai needs position:relative, then the div of the images needs to position:absolut and text as well. Note that the second image has a margin-top concerning the height of the text that you will have to put on your hand in px, there is no way to be dynamic at this time, but maybe not need for what I saw on the site. Now the text that has a margin-top 500px, referring to the height of the first image tb has 500px height. Tb needed to put display:block in the images to be under each other. You’ve seen that is a car*lho gambiarra...

See the example. everything is in CSS, and its HTML structure remains intact.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.pai {
    position: relative;
}
.texto {
    margin-top: 500px;
    position: absolute;
}
.imgs{
    position: absolute;
}
.imgs img{
    display: block;
}
.mt {
    margin-top: 200px;
}
<div class="pai">

    <div class="imgs">
        <img src="http://placecage.com/500/500" alt="">
        <img class="mt" src="http://unsplash.it/500/500" alt="">
    </div>
    
    <div class="texto">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet architecto ipsam ducimus debitis minus eum quaerat ratione expedita nulla odit, accusamus magni nesciunt eligendi id dolore libero porro vero, laboriosam eius eveniet repellat? Voluptas explicabo dolor quod deserunt soluta debitis facilis tempora recusandae sunt voluptate quisquam dolorem suscipit accusantium ipsum placeat voluptates, quis, optio ab maiores dicta aperiam labore nemo doloremque similique! Recusandae doloremque, aut beatae quam maiores quia? Quis repellendus inventore facere corporis deserunt. Nobis ipsum a quisquam? Mollitia, autem. Sequi facilis recusandae quo sunt voluptates consectetur, obcaecati aliquid minima nemo, nihil iusto magnam assumenda nulla? Veniam, est?</p>
    <div>

</div>

  • That’s exactly how I want it, but since the project here is really big, making it work this way is tense....

  • The code of this site is completely polluted, several unnecessary Ivs, among others... but it happens right hehe

  • It... did not give haha put exactly, but bugged everything kk until the header that is inserted by include from another page, defaced... with these positions Absolute, relative, etc... happened a lot of things that you can not write kkk, but anyway, Fight. That I don’t get fired kkk

  • Guy mess with this kind of template is Phoda, even more in PHP. So I don’t particularly use, I like to have control of things understand. Eh already imagined that he was going to bug had already spoken rss, but it will be right right... You can also try using display:flex and put order in the elements. From the one studied in this, feces may be an option

Browser other questions tagged html css

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