I am having an issue with three side-by-side divs using the display:inline-block property.
When the divs are empty, they all align perfectly on the same horizontal level.
However, once I add <p> tags and some line breaks (<br/>) to the first div, the other divs move downward.
If I input enough content in the second div, the third one is pushed down even further.
This is how I structured my HTML for the divs:
<div class="main-box" id="about">
<h1>About</h1>
<p>This box contains a single paragraph of text with line breaks.</p>
</div>
<div id="login-container">
<div class="main-box" id="login">
<h1>Login</h1>
<p>Existing member? Please sign in to access your account!</p>
</div>
<div class="main-box" id="signup">
<h1>Signup</h1>
<p>Sign up by completing the registration form.</p>
</div>
</div>
The last two boxes are enclosed within a parent div which allows them to appear together as intended.
Below is the CSS code I used:
div.main-box {
text-align: left;
display: inline-block;
border: 10px solid red;
margin: 20px;
padding: 25px;
border-radius: 50px;
width: 400px;
height: 400px;
}
div#login-container {
display: inline-block;
}