Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box stays fixed.
Attempts at creating a content wrapper with padding and margins failed as content kept going over. Also struggled to position the left and right sections correctly.
Here is some of my HTML and CSS:
body {
background-color: #2A0944;
font-family: 'Roboto';
}
* {
margin: 0;
padding: 0;
}
i {
margin-right: 10px;
}
.chat-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
width: 40%;
left: 30%;
top: 80px;
}<header>
<div id="navbar-animmenu">
<ul class="show-dropdown main-navbar">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li>
<a href="#"><i class="fas fa-wrench"></i> Demo</a>
</li>
<li class="active">
<a href="#"><i class="fas fa-robot"></i> ChatBot</a>
</li>
<li>
<a href="#"><i class="fas fa-map-pin"></i> About</a>
</li>
<li>
<a href="#"><i class="fas fa-users"></i> Team</a>
</li>
</ul>
</div>
</header>
<body>
<section class="chat-section">
<div class="mode-selector">
<button class="mode-button" id="normal-mode">Normal Mode</button>
<button class="mode-button" id="material-mode">Material Mode</button>
</div>
<div class="chatbox">
<div class="messages-container"></div>
<div>
<div class="send-section">
<button class="clear-chat"><i class="fas fa-poo"></i></button>
<input type="text" class="message-input" placeholder="Talk with ChatBot ..."/>
<button class="send-button">Send</button>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>Having no issues with CSS for items in the navigation bar and chatbox, but struggling most with adding left and right sections. Do I need to modify the current chatbox? How can I ensure scrolling keeps content below a certain line? Any advice appreciated!
Mentioned above the struggles with using a content wrapper unsuccessfully.