I would like the inner two divs to be positioned as: _________ _________ | | | | | | | | | | | | |_________| | | | | |_________|
Usually, when they are both empty or filled with simple text, it appears as shown above. However, when I introduce
tags and add more divs with margins inside them, the shorter box starts to move downward. My objective is to keep the first box in a fixed position.
Note: I have provided a pattern, but if it appears distorted after posting this question, please run the code.
<html>
<head><title>abc</title>
<style>
#biggerbox{
width: 1200px;
margin: 0 auto;
padding-top: 100px;
text-align: center;
border: 1px solid;
}
#first{
width: 500px;
height: 600px;
display: inline-block;
border: 1px solid;
}
#second{
width: 500px;
height: 800px;
display: inline-block;
border: 1px solid;
}
</style>
</head>
<body>
<div id="biggerbox">
<div id="first">
This is first box
</div>
<div id="second">
This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>This is second box
<br>
</div>
</div>
</body>
</html>