Sun P. Sun P. - 1 month ago 7
CSS Question

How to place a div below a nested div?

How do I 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 below the second div (.box2). Please see 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 issue is further magnified when the screen size narrows. I want the third div (.box3) to respond to screen size changes so that the third div always appears below the second div (.box2).

Answer

You have set a fixed height for box1 - that is why the following div is overlapping the nested content.

So remove the height from box1 and there you go:

.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 can't change the height, you can overflow it using 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>

Comments