CSS: flexible side panels with stationary center

I am looking for a specific layout that consists of three columns: left, content, and right.

The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the right edge, ensuring that they stay in position even when the browser is resized.

The content/centre column needs to have a fixed width of 960px and remain centered in the middle of the screen.

When the browser width is resized, the content should stay centered while the left and right columns do not overlap it but stay on their respective sides.

I have made several attempts but have not been successful so far. Any assistance would be greatly appreciated.

Thank you.

UPDATE:

As requested, I have included a jsfiddle link to show what I have tried:

http://jsfiddle.net/UcmBj/

I have almost achieved the desired layout, with the content remaining centered and the right column aligning to the right. However, I would prefer if both the content and the panels remained centered.

Currently, when scaled down, the left column and part of the content are visible. I would like the content to be fully visible and centered in the window, with the left column pushed off to the left of the screen. I hope this link provides some clarity.

Additional information: The side columns should have a minimum width of 280, the content section should be 960px wide, making the outer container a minimum of 1520px wide.

Answer №2

Upon further exploration, it appears that the desired method is not currently feasible. As a workaround, I adjusted the positioning of the left and right columns using CSS to align them accordingly. By incorporating CSS media queries and applying a negative margin to each column, I was able to move them without interfering with the main content.

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

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

Changing the Button Background in Richfaces

I am attempting to modify the background-image of a h:commandButton element located within a RichFaces:panel. To achieve this, I created a CSS file with the following styling rule: .sButton { background-image:url('../imgs/btnTexture2.jpg') ...

Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...

Using CSS to position an element relative/absolute within text inline

Need help aligning caret icons next to dynamically populated text in a navbar menu with dropdown tabs at any viewport size. Referring to positioning similar to the green carets shown here: https://i.stack.imgur.com/4XM7x.png Check out the code snippet bel ...

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...

Swap out the traditional submit button on your form with a stylish Font Awesome

Can anyone assist with replacing the submit button with a Font Awesome icon? I've tried it myself, but the icon is not displaying on the button. Here is what I have attempted so far: <form action="{{route('destroycourse', $course->id) ...

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

Arrange images in a stack format, scaling them based on their percentage

I'm curious about how to overlap images that are sized using a percentage value (in this case, 100%). If the images had a fixed width/height in pixels, I could easily adjust their positions with position:relative to stack them on top of each other. Ho ...

The impact of Opacity CSS on child elements in web design

Struggling to show an error message when a user disables JavaScript. In my current work, I have two div layers - one covering the entire page and another on top to display the warning message. However, I'm facing issues with the opacity settings affec ...

Create a visually appealing collage using CSS without the need for traditional IMG tags

I'm currently working on a fun little project. My goal is to create a photo grid in HTML5 that displays 3x4 pictures (without using Divs) and adding all the images via CSS, meaning no img tag in the HTML file. The challenge is to make this grid respo ...

Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process. However, ...

Customize the Bootstrap Navbar to display background only on the right side and not across the entire width

I am utilizing Bootstrap's navbar, specifically using the dropdown toggler icon on the right side. I am looking to have a background that only covers the right portion of the width and not the entire width. Any suggestions or insights would be greatly ...

How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled. The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly ...

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

What are some ways to align text both vertically and horizontally within columns?

How can I center text both vertically and horizontally inside two columns using Bootstrap 4? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <div class="row"> <div class="co ...

Altering the height of cells in a table for HTML emails being sent to Gmail accounts

When attempting to send an HTML email from Outlook 2013 to Gmail, I have encountered a significant gap between the rows. Despite my efforts, I have been unable to adjust the row height. I am seeking advice on how to resolve this issue. Here is the code s ...

My navbar has an empty space that I want to fill. I aim to move the search bar all the way to the right - any suggestions on

https://i.sstatic.net/SvTiG.jpg This is the code for my navbar customization: <nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav"> <div class="container"> <div class=" ...

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

I have a requirement for my website to have 2 navigation bars and also 2 sets of navigation links. I would like to implement scroll-spy functionality on both navigation bars, even though only one will be visible at a time. The issue I am facing is that w ...

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...