Designing a solid sidebar of a specific width alongside a flexible container for content that adapts to different screen sizes using

Question

Designing a solid sidebar of a specific width alongside a flexible container for content that adapts to different screen sizes using

I have a sidebar that is fixed at 200px on the left side of the page, and a responsive content container on the right side.

To center the content in the right container, I used the following CSS:

.sidebar {
width: 10%;
position: fixed;
height: 100%;
background-color: red;
}

.parent {
position: relative;
width: 90%;
height:auto;
margin-left: 10%;
border: 2px solid #000;
}

#kid {
width: 75%;
margin: 0 auto;
border:2px solid #f00;
}

Now, I want to achieve the same layout with a fixed width sidebar of 200px. How can I do this? JSFiddle: http://jsfiddle.net/Dnjwa/1/

Any assistance would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

To achieve this, you can utilize the CSS calc function. Here's an example:

.container {
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

Check out the updated code snippet.
For more information on calc browser support.

If you prefer not to use calc, you can achieve a similar result with padding. However, there are some considerations to keep in mind when using this approach. See this example.

Answer 2

To achieve this, you can utilize the CSS calc function. Here's an example:

.container {
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

Check out the updated code snippet.
For more information on calc browser support.

If you prefer not to use calc, you can achieve a similar result with padding. However, there are some considerations to keep in mind when using this approach. See this example.

Designing a solid sidebar of a specific width alongside a flexible container for content that adapts to different screen sizes using

Answer №1

Similar questions

Interactive Features in Vue Component

Unexpected Placement of CSS Grid Items

When the getImageData event is triggered upon loading

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

What is the best way to shade the background when a hyperlink is pressed?

Is there a way to replicate input data from one website onto a totally separate platform?

Reorganizing the layout of grid items

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Lock the initial column in an HTML table

Turn off HTML5 Audio

Aligning content in CSS for cross-browser compatibility with Internet Explorer and Chrome

How to position collapsible buttons in Twitter's Bootstrap framework

I am interested in designing a navigation bar with varying background and hover colors for each individual block

Spacing between cards using Bootstrap

Transferring information to a function

Conceal Content from Onsite Search

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

The scroll functionality does not seem to be functioning as intended on mobile devices when

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?