My HTML code is structured using Bootstrap to create a grid layout. The goal is to have the NAV BAR and FOOTER contained within the left container, allowing the SIDEBAR on the right to display without overlapping. Here's an example image of what I'm aiming for:
https://i.sstatic.net/Kpk35.jpg
The challenge I'm facing is getting the footer to stay positioned at the bottom of the parent div, which is the main row containing all the nested divs. I've tried various solutions from Stack Overflow, like using relative and absolute CSS classes, setting bottom to 0 px, and adjusting margins. However, I'm still unsure how to achieve the desired layout. The goal is to keep the toolbar fixed at the top, the center portion filling the remaining space, and the footer fixed at the bottom. The toolbar and footer have fixed heights, while the center portion should adjust to the available space. Additionally, there's a fixed sidebar.
<div className="container-fluid">
<div className="container-fluid">
<div className="row mt-2 mb-2 mr-2 ml-2 main">
<div className="col-md-8">
<nav>
<div className="row mt-2 mb-2 mr-2 ml-2 nav">
<div className="col-md-12">
<div className="ui buttons">
<button className="ui button mb-1 mt-1">
<i className="plus icon"></i>
Add Card
</button>
<div className="or mb-1 mt-1"></div>
<button className="ui positive button mb-1 mt-1">
<i className="sort amount down icon"></i>
Sort All
</button>
</div>
</div>
</div>
</nav>
<div className="row mt-2 mb-2 mr-2 ml-2 body">
<div className="col-md-12">
<div className="card mt-2 mb-2">
<div className="card-body">
<p className="card-text">{getRandomNumber(0, 101)}</p>
</div>
</div>
</div>
</div>
<footer>
<div className="row mb-4 mr-2 ml-2">
<div className="col-md-12">
<h3 className="text-center text-muted">Footer</h3>
</div>
</div>
</footer>
</div>
<div className="col-md-4">
<ul>
<h6>React Coding Challenge Formatted Instructions:</h6>
<li className="list-item">
Create a responsive React application using either JavaScript or
TypeScript.
</li>
<li className="list-item">
The main portion of the application will contain a list of cards
with a randomly generated number between 0-100 within each card.
</li>
<li className="list-item">
The right pane has a fixed-width that remains attached to the
right side when the user resizes the window. Once the browser
width is small, the pane will be hidden.
</li>
<li className="list-item">
The top pane is a fixed-heigth toolbar that has a button to add
additional cards as well as a button to sort all the cards in
ascending numerical order based on the number within each card.
</li>
<li className="list-item">
The bottom pane is a fixed-heigth footer that just contains the
text "footer".
</li>
<li className="list-item">
The center pane is the card container. It starts out with zero
cards. The user will click the "Add Card" button in the top
toolbar to add a card in the center container.
</li>
<li className="list-item">
The center pane has a vertical scrollbar that will become
visible once enough cards are displayed. The user can use the
scrollbar to scroll through all the added cards.
</li>
<li className="list-item">
The cards are added vertically into rows which will wrap as
needed. The amount of visible cards per row is dependant on the
width of the browser.
</li>
<li className="list-item">
Each card has a set pixel size of 300 pixels in width and 250
pixels in heigth.
</li>
...
For the JavaScript portion of the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const App = () => {
return (
<div class="container-fluid">
<div class="row mt-2 mb-2 mr-2 ml-2 main">
<div class="col-md-8">
...
<div class="row mb-4 mr-2 ml-2 footer">
<div class="col-md-12">
<h3 class="text-center text-muted">
Footer
</h3>
</div>
</div>
</div>
<div class="col-md-4">
<ul>
<lh>React Coding Challenge Formatted Instructions:</lh>
<li class="list-item">Create a responsive React application using either JavaScript or TypeScript.</li>
...
</ul>
</div>
</div>
</div>
);
};