What is the best way to expand the header, content, and footer colors to cover the entire width of a page while keeping everything centered within a fixed width

I managed to get the header and main content area to stretch across the full page, while keeping the content centered.

But now I am facing an issue with the footer not stretching like the header. How can I make the footer stretch as well?

HTML:

<body> 
<div id="header"> 
    <div class="container"> <img src=   "images/webalign-uk-white.png" width="429" height="61" />
        <!-- insert header content here --><p class="fltrt">Contact: 00000000000</p></div>
    <!-- .container --> 
</div><!-- #header --> 
<div id="content"> 
    <div class="container"> 
        <!-- insert main content here --><h1> Hello!</h1>

 <div id="footer">
    <div class="container"> 
        <!-- insert footer content here --><p>Footer1</p>
  </div><!-- .container --> 
</div><!-- #footer --> 
</body>

CSS:

.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px; /* the auto value on the sides, coupled with the width, centers the layout */
}

#header {
    background-color: #eee;
}

#content {
    padding: 10px 0;
    background-color:#F9f9f9;
}

#footer {
    padding: 10px 0;
    background-color: #333;
    color: #bbb;
    clear: both;
}

Answer №1

Make sure to properly close the .container and #content divs to avoid any potential issues.

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

How may I utilize CSS to generate a dynamically resizing rotated triangle that adjusts based on the text content?

Looking to add a dynamic badge in the top left corner of a div that adjusts its size based on the text content. Check out this example: http://jsfiddle.net/sbick/npxaasht/ <article> <div class="triangle"> <span>NEW</span ...

What can I do to eliminate the excess white space within my div element?

I've built this app using the create-react-app CLI, but I'm struggling to remove the extra white spaces surrounding my main container. Check out the screenshot below for reference. Currently, the only div in my app has the following CSS: .main ...

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

Looking to retrieve the values of a 3-level dropdown using ajax. Successfully fetched the value of the 1st dropdown, but unsure of how to retrieve the values of the 2nd and

I have successfully managed to retrieve all values, but when the 2nd and 3rd drop-downs are populated through Ajax, how can I access those values? I am looking for a way to fetch the values of the 2nd and 3rd drop-down without resorting to session variable ...

Bootstrap - Struggling to achieve responsiveness on the page

I've recently designed a website with a mega menu feature. However, as I try to resize the page, the layout doesn't adjust well, and some elements appear to be overflowing beyond the screen. Unfortunately, I can't share the entire code. Cou ...

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

How can I create a component that dynamically adjusts to different screen sizes

I have developed three child components for the main content area (excluding the header) However, one of the components is not responsive. Below is the code snippet: <div className="row" style={{marginTop:'30px',}}> <div class ...

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

Looking for a way to capture screenshots of various URLs and display them in the Chrome browser using PhantomJS. How can I achieve this? Any assistance would be greatly appreciated, as nothing is currently showing up on the webpage. This is how my code a ...

Struggling to align text to the far left within a text area using Bootstrap

When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

How can you utilize the Array submission syntax within HTML coding?

I currently have numerous input fields within a form, and some of them are structured like this: <input name="agents[]" type="file" /> Additionally, imagine there is a plus button next to this field as shown below: <img src="plus.jpg" id="some_ ...

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

Using nodeJS to showcase content on a web page

I'm relatively new to NodeJS, and I am trying to figure out if there is a way to utilize NodeJS similar to JavaScript. My goal is to retrieve data from a database and display it within a div on my index.html page. When attempting to use querySelector, ...

Issue with window.getSelection() function in Mozilla Firefox

I have implemented code to retrieve the window.getSelection() and assign it to a variable in order to store the current focusNode and offset when the contenteditable div onBlur event is triggered. This functionality works as expected in the Chrome browse ...

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

Eliminate the golden hue from the input field when autofill is activated

Can anyone help me figure out how to get rid of this unsightly chrome background that appears when autofill is enabled? (See below for reference.) I've attempted the following solutions: *:focus { outline: 0; } input:-webkit-autofill { -webk ...