Hey, I just created a login panel using CSS and HTML. After applying some floats, all the content ended up displaying under the panel. I attempted to use clear: both, but that didn't resolve the issue. My goal is to have all other contents displayed after the panel, not below it as shown in the image:
https://i.sstatic.net/P9vhW.png
Here is my implemented HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mobile Web Page</title>
<link rel="stylesheet" href="css/styles.css" />
<script
src="https://kit.fontawesome.com/f99e299e1f.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
</head>
<body>
<div class="panel-container">
<div class="panel">
<div class="left-side">
<div class="left-text">
<h1 class="header">Lorem, ipsum dolor.</h1>
<h4 class="under-header-text">Lorem ipsum dolor sit amet consectetur.</h4>
</div>
</div>
<!-- -->
<div class="right-side">
<div class="right-side-container">
<h1 class="header2">Lorem ipsum dolor sit amet.</h1>
<div class="login">
<a href="#" class="google-login"><div class="login-div" >Login with Google</div></a>
</br>
<a href="#" class="facebook-login"><div class="login-div">Login with Facebook</div></a>
</div>
<h2 class="horizontal-line"><span class="or-text">or</span></h2>
<form>
<label>Email</label>
<input type="text">
<br>
<label>Password</label>
<input type="password">
</form>
<a href="#"><div class="login-button">LOGIN</div></a>
<a href="#" class="forgot-pass">Forgot Password?</a>
</div>
</div>
</div>
</div>
<!--v v v v Content I want to display under the login panel v v v v v-->
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus doloremque ullam hic earum nostrum magnam, consequuntur ut, nulla, suscipit optio sequi eius. Maxime exercitationem facilis, officia, officiis eligendi error hic voluptatibus asperiores aut, labore possimus? Ad, aperiam consequatur. Qui similique nobis mollitia consequatur laborum provident dolore inventore quia dicta a?</p></div>
</body>
</html>
And here's how I styled the elements in my CSS:
(body styling and panel layouts)
I've tried using 'clear both' and also experimented with pseudo-elements like 'panel:after' and 'clear both page:after', but still couldn't get the desired result. Any guidance or alternative solutions would be greatly appreciated. Thank you for your assistance.