mfaheemkhan6
New Member
I have three divs that are side-by-side using \[code\]display:inline-block\[/code\].If the divs are empty, they are at the same horizontal level.As soon as I add \[code\]<p>\[/code\] tags and some line breaks (\[code\]<br/>\[/code\]) to the leftmost/first div, the rest are moved down.If I put enough content in the second box, the third is moved down even more.My HTML for the boxes:\[code\]<div class="main-box" id="about"> <h1>About</h1> <p>This box has one paragraph of text, with line breaks</p></div><div id="login-container"> <div class="main-box" id="login"> <h1>Login</h1> <p>Already a member? Sign in and see your stuff!</p> </div> <div class="main-box" id="signup"> <h1>Signup</h1> <p>Create an account by filling out this form.</p> </div></div>\[/code\]The last two boxes are grouped in a div so that they "float" together.My CSS:\[code\]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;}\[/code\]