All geek questions in one place

How to place a div below a nested div?

How to place a div below a nested div? Right now, the third div (.box3) seems to overlap the second div when I want it to appear under the second div (.box2). Example: https://jsfiddle.net/662fwmq5/

.box1 { width: 50%; height: 200px; padding: 15px; background-color: red; margin: 0 auto; } .box2 { width: 80%; padding: 15px; background-color: blue; color: #fff; margin: 0 auto; margin-top: 100px; } .box3 { background-color: #ccc; text-align: center; } 
 <div class="box1"> Box 1 <div class="box2"> Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. </div> </div> <div class="box3"> More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. </div>

My problem increases even more when the screen size narrows. I want the third div (.box3) to respond to screen resizing, so that the third div always displays under the second div (.box2).

+5
source share
2 answers

You set a fixed height for box1 - this is why the next div overlaps the embedded content.

So, remove height from box1 and there you are:

 .box1 { width: 50%; /*height: 200px;*/ padding: 15px; background-color: red; margin: 0 auto; } .box2 { width: 80%; padding: 15px; background-color: blue; color: #fff; margin: 0 auto; margin-top: 100px; } .box3 { background-color: #ccc; text-align: center; } 
 <body> <div class="box1"> Box 1 <div class="box2"> Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. </div> </div> <div class="box3"> More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. </div> </body>

If you cannot change the height, you can overflow it with overflow-y: auto :

 .box1 { width: 50%; height: 200px; overflow-y: scroll; padding: 15px; background-color: red; margin: 0 auto; } .box2 { width: 80%; padding: 15px; background-color: blue; color: #fff; margin: 0 auto; margin-top: 100px; } .box3 { background-color: #ccc; text-align: center; } 
 <body> <div class="box1"> Box 1 <div class="box2"> Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. </div> </div> <div class="box3"> More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. </div> </body>
+1
source

u can use container div and put box1 and box2 inside and box3 outside it will be the simplest and most relevant ..

0
source

Source: https://habr.com/ru/post/1258353/

More articles:


All Articles