Beginner in CSS Structuring

Hey there, I'm facing a bit of a challenge and could really use some guidance. I'm trying to design a layout for a website with specific components, but I can't seem to achieve the exact look I want. I know it should be straightforward, but my expertise lies more in development rather than UI/UX design. https://i.sstatic.net/VJT40.png

My goal is to have a sidebar on the left featuring menu items, a fixed top navigation bar, and a footer fixed at the bottom of the page, with the main body of the site scrolling between them. There are also pages where I need the content in the main body to be centered both vertically and horizontally (form input).

I'm hoping to utilize Bootstrap 5.2 for this project, but I'm open to using CSS grids or any other methods that can help me achieve the desired outcome. Additionally, I want the layout to be responsive, which is why I decided to explore Bootstrap instead of creating my own media queries.

Thank you in advance for any assistance or suggestions. I've been struggling with this for quite some time, and reaching out for help seemed like the best next step.

csslayoutflexboxcss-gridbootstrap-5

Answer №1

There are two clearly defined columns: (1) sidebar and (2) everything else.

To create these columns within the main row, we designate them as col-2 for the sidebar and col-10 for the main content column.

Within the main content column, we further divide it into sections for navigation, main content, and footer.

    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-2 bg-dark text-light">
                sidebar
            </div>
            <div class="col-10 bg-light">
                <div class="row h-100">
                    <div class="col-12 bg-primary nav">
                        nav
                    </div>
                    <div class="col-12 main">
                        <p>1</p>
                        <div style="height: 5000px;">a</div>
                        <p>2</p>
                    </div>
                    <div class="col-12 bg-primary footer">
                        footer
                    </div>
                </div>
            </div>
        </div>
    </div>

For styling in the CSS, we specify heights for the navigation and footer elements, and use calc() to determine the height of the main content section. If the content overflows this height, a scrollbar will appear for scrolling.

        .nav {
            height: 60px;
        }

        .main {
            height: calc(100vh - 120px);
            background: #f1f1f1;
            overflow: scroll;
        }

        .footer {
            height: 60px;
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the color of the active button within the Bootstrap Links and Buttons element

Greetings! I am currently utilizing Bootstrap's Links and buttons My objective is to modify the color of the active button highlighting, which is set to white by default, to a different color: <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrap

expanding the close window icon beyond the boundaries of the modal container

I seem to be experiencing a CSS mistake that I can't figure out. The close window icon in my modal window is getting cut off at the edge and not displaying properly. Check out this JSFiddle link <div id="sendMsgForm" class="modal"> <div ...

htmlcss

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

htmlcsshyperlinkstylesheet

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

When I'm coding with React Native, I use the styled properties that follow most of CSS syntax and are formatted in camel case. For instance: //... <Component style={styles.container} /> //... const styles = StyleSheet.Create({ ...

cssreactjsstyled-componentsemotion

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

csssassscale

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

The functionality of Foundation's 12 grid system is not functioning correctly

Check out the code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="style ...

htmlcssresponsive-designzurb-foundation

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : https://i.sstatic.net/pQP79.png My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintai ...

javascripthtmlcss

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

Customizing the title style of the Material-UI app bar

Is there a way to customize the AppBar title in Material-UI without using inline styling? I have a separate CSS file and I want to be able to adjust the size of the title, for example. Something along these lines: .app-bar title { font-size: 120px !i ...

cssreactjsmaterial-ui

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain th ...

htmlcss

Generating a PDF file from HTML div content using a button click

I am looking to export a specific div section as a PDF file. The div contains a mix of text, images, and charts. <div id="newdiv"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/ ...

javascriptjqueryhtmlcsspdf

SASS causing conflicts with CSS breakpoints selector overrides

I am working with a partial file named _display.scss. It includes various @mixin and styling classes related to the display CSS property. _display.scss @mixin d-block{ display: block; } @mixin d-none{ display: none; } .d-block{ @include d- ...

csssassscss-mixins

Align the positioning of the dropdown menu and the input field

I'm having trouble with css and ng2-completer. I am attempting to line up the dropdown section with the input field. Unfortunately, there is no demo example provided on the page showing how to target elements using css. I've tried selecting the ...

cssangularng2-completer

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

javascriptjqueryhtmlcssmodal-dialog

Error message: The method z.fn.dropdown is not defined

I am looking to implement a basic select option using bootstrap-select. My goal is to use bootstrap-select for creating the select picker. Upon checking the console, I come across this error message: https://i.sstatic.net/XUJYy.png Below is the HTML cod ...

bootstrap-5bootstrap-select

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...

jquerycsstwitter-bootstraplistbox

Can someone help me understand how to change the structure in order to identify which class has a body?

I have a small example to share with you: link HTML CODE: <div class="body"> <div class="test">TEST</div> </div> JS CODE: switch (className) { //instead of n, I need to write className case body: alert("my cla ...

javascriptjqueryhtmlcss

Position the button to the right using the Bootstrap float-right class

Currently, I am utilizing reactstrap within my React component. My primary intention is to position a button to the right side of the container but unfortunately, the following code doesn't achieve the desired result: <td class="col-md-4 clearfix" ...

cssbootstrap-4