Can anyone help me figure out how to use CSS to separate the content area of my website from the background? I've attached a picture to demonstrate what I'm trying to achieve. Basically, I want the background on the sides to expand for users with large monitors, while keeping the content area a fixed size.
Thanks, - Amar
Give this a shot.
body {
background: #111;
padding: 40px;
}
#content {
width: 900px;
background: #eee;
}
Check out this CSS snippet :
element {
width: 800px; // adjust to fit your design
margin: 0 auto; // center horizontally
}
Here's a working example on jsFiddle
#container {
width:500px;
margin: 0 auto;
}
<div id="container">
Add your text here
</div>
section {
background-color: #d9e8f7;
text-align: center;
}
.wrapper {
background-color: #f0f6fb;
width: 1200px;
margin: 0 auto;
}
.wrapper is a div.
If I understand your question correctly, it seems like you are looking for a wrapper.
To achieve this, place the background image on the body and then create a div with the following CSS rule for the content:
.wrapper {
width: 960px;
margin: 0 auto;
}
You can include this in your HTML code like so:
<div class="wrapper">
Content goes here
</div>
The WIDTH value should be set to the exact size you desire for your "content box," while the margin property helps to center it regardless of the screen size.
Currently working on a website using HTML5 and Bootstrap 4, I encountered an issue while attempting to convert a square image into a circle. Previously in Bootstrap 3, this was achieved simply with the .img-circle class. However, I seem to be having troubl ...
I am currently using a Jcarousel and I need to assign the class "active" to the current pagination option. I have come across similar inquiries regarding this matter. <script type="text/javascript"> /** * The initCallback callback is used * to add ...
I have a tab code that uses ajax data attributes to load content. The tabs are loaded with ajax from PHP code based on the data attribute. How can I add a fade in/out effect to the tabs' content? I've attempted it but haven't been successful ...
I am faced with a light slider displaying images of varying heights. When I enable isAdaptiveHeight, it adjusts the height based on the image size automatically, but this doesn't meet my preferences. What I desire is to set a fixed height for all ima ...
I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...
Working on a layout design in Angular 9 and utilizing the ngx-masonry package (https://www.npmjs.com/package/ngx-masonry) to achieve a specific grid structure. Here’s a snippet of my code: <div class="container pt-5"> <ngx-masonry ...
I'm dealing with a menu that has submenus of its own. Issue: Upon loading the page, I notice that the website is adding an extra letter S at the end of each submenu. How can I eliminate that letter S from the end of every submenu using JQuery or CS ...
I am facing an issue with a 240x240px div that contains a fading slideshow of images of varying sizes. Each image is set to a height: 240px, and the width adjusts proportionally to the height. For images that are taller than they are wide, I center them in ...
I'm having trouble getting my price ticker/slider to work properly on mobile devices. It works perfectly on desktop/laptop, but on mobile the ticker items just briefly appear and then disappear without sliding animation. Here is a clip of the bug: Cl ...
Within my application, there are 2 textareas with corresponding code implementing "dragover" and "drop" listeners for each one: // for dragover handleDragOver : function (evt) { var self = this; evt.preventDefault(); console.log ( ...
Is it possible to configure the line breaks so that the middle item is dropped instead of the last one? Also, how can I prevent elements a and c from breaking onto new lines? .container{ width: 80%; height: 31em; margin: auto; ...
https://i.sstatic.net/caOzn.png I am having an issue where the first letter of my text is going out of the box in the screenshot. I have tried using the font-kerning property, but it doesn't seem to solve the problem. Can someone please advise me on h ...
Request in Plain Language I'm working with a nested v-list that has the following structure: https://i.sstatic.net/6t2ck.png The aim is to have the headers "BusinessUnitA" and "TaskY" highlighted (with some background color) when active. Currently, ...
Currently, I am experimenting with two jQuery plugins (awkward/Coda Slider 3) to implement a sliding effect for DIV content. Everything seems to be working smoothly until I attempt to set dynamic content (using JavaScript) after creating the plugin object. ...
My issue involves two jumbotrons, each with a col-md-6 class, positioned nicely next to each other. Currently, they are contained within a modal, but for the sake of example, I have created a fiddle without the modal to showcase the same behavior. If I app ...
I'm currently attempting to move the paragraph header closer to my h1 title. I'm struggling with incorporating the position function and have tried using padding without success. On the image, I am aiming to position the text "Where every connec ...
Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...
Currently, I am utilizing the keyup event for an Ajax call on an input field along with the f:validaterequired tag. Each time the Ajax event (keyup) triggers, f:validaterequired is being validated. However, I do not want to validate when the value is null. ...
As I embark on the journey of constructing my webshop, please forgive any imperfections you may stumble upon, unless they pertain to the subject at hand. Currently, I am in the process of crafting the shop menu, utilizing a vertical collapse/expand menu b ...
My goal is to have a checkbox always checked unless we intentionally want it to be unchecked. Check out the following HTML code: <input type="checkbox" class="custom-control-input" [(ngModel)]="productDetails.iscanRetrunable" name="isc ...