Sticky sidebar that adjusts to viewport size in a responsive layout

When designing a CSS fluid layout, most divs utilize percentages to adjust based on the viewport size. However, I have a specific scenario where I need my sidebar to maintain a fixed position.

For instance:

<aside style="width:25%; float:left; position:fixed;">
    aside content
</aside>
<div style="width:75%; float:left;">
    main content    
</div>

My ultimate goal is to ensure that the sidebar retains a particular width in relation to the viewport dimensions. For example, I would like it to remain 300px wide when the viewport ranges between 1000px and 1200px.

As an alternative approach, I also aim to keep the sidebar width at 300px if its parent div (although not specified in the previous example) exceeds 1000px.

This may require some JavaScript coding expertise, which unfortunately I lack. Any guidance or support from someone knowledgeable in JS would be greatly valued. Thank you!

csscss-positionfluid-layout

Answer №1

attempt:

@media only screen and (max-device-width: 768px) { div#content { margin-left: 50px; }}

Answer №2

seems similar to: Bootstrap fluid layout with fixed sidebar width

Here is my response on that thread:

I believe you are seeking something along these lines:

<div class="sidebar span4">
    This is the fixed sidebar I mentioned
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">Fluid content here</div>
            <div class="span3 offset1">Yes!</div>
            <div class="span6">Amazing!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">Half 1</div>
            <div class="span6">Half 2</div>
        </div>
    </div>
</div>

Feel free to check out this fiddle for a preview: http://jsfiddle.net/TT8uV/2/

Just a heads up:

You aren't restricted to using bootstrap as your 'main container', allowing you to position your sidebar beside a grid system (such as bootstrap's fluid and responsive design). This way, you have plentiful control over the sidebar without impacting the primary content.

Hopefully this solution meets your requirements.

Answer №3

Experiment with a CSS media query

Here's a quick demonstration

@media all and (min-width:1000px) and  (max-width:1200px)
{
  // css 
}

@media all and (min-width:300px) and (max-width:1000px)
{
   // css 
}

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

Displaying image issues persist on Safari browsers for Mac and iPhone

I am currently working on a website and facing an issue with the responsive image display on Safari for Mac/iPhone. Here is the code snippet I have been using: <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" co ...

htmlioscssiphonesafari

Attempting to reach <p> from numerous web pages

Currently, I am working on a project where I need to extract text data from various websites. I have successfully managed to retrieve the text data using <p> tags. I would really appreciate any assistance with this task. Thank you! ...

javascriptpythonhtmlcsspython-3.x

Issue with CSS3 animations

.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; ...

cssanimation

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...

htmlcss

Adjusting the spacing between rows in Bootstrap 5

Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen? [aaa] [bbb] [ccc] not [ aaa ][ bbb ][ ccc ] ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

javascriptcssreactjs

Rotating SVG graphics with a growth effect

Check out my CSS below: /* -------------------------- Base --------------------------- */ body { padding-top: 60px; background: #0f4e7a; } svg { margin: auto; display: block; width: 28%; } .star{ fill: #FFF; } /* ------------------ ...

csssvg

What is the approach for incorporating JavaScript variables in Jade templates for writing inline CSS styles?

Struggling to inject CSS code dynamically? You're not alone. style(type='text/css') #header a#logo { background:url(constants.logo) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header a#logo { ...

cssnode.jspug

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

After successfully creating an email form with jquery validation error style that appears when there's an error, I encountered a problem. When the screen width is reduced or viewed on a small screen, the error message pushes down the button. I&apos ...

jquerycssjquery-validate

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Currently, my main goal is to extract and save a single image from a website post logging in. After examining the image, I discovered that it has a full xpath of /html/body/form/main/div/section/div[1]/div/div[2]/div/img. My plan is to utilize beautiful so ...

htmlcssselenium-webdriverbeautifulsouptesseract

swap between style sheets glitching

My website features two stylesheets, one for day mode and one for night mode. There is an image on the site that triggers a function with an onclick event to switch between the two stylesheets. However, when new visitors click the button for the first ti ...

javascripthtmlcss

Using jQuery to apply a CSS border to an image within a textarea

Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...

jqueryhtmlcsstextarea

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

javascripthtmlcssxhtml

Using jQuery to extract the HTML content of an element while removing the style attribute

Is there a way to retrieve the raw HTML of an element, or obtain the HTML without the "style" attribute applied? Let's consider the example below: <div class="outer"> <div class="inner"> some text </div> </div> A ...

javascriptjqueryhtmlcssjquery-animate

Optimizing Bootstrap 4 Flex-Row Dimensions

Issue: I'm currently working on a relatively intricate ListGroup using bootstrap v4. The .flex-row div is displaying some mysterious white space at the bottom, and I need assistance in eliminating it. Attempts Made So Far: I've experimented w ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :) Here's my folder structure: Main Folder: ci_attl - application ...

csshyperlink

Ways to showcase flair in PHP code such as this

I currently have this code snippet: <h2 class="index-single">Tech Categories</h2><?php $args2 = array( 'cat' => 11 , 'posts_per_page' => 9 , 'paged' => $paged ); $the_query2 = new WP_Query( $args2 ); ...

javascriptphpjquerycss