Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable?

You can view the source at http://jsfiddle.net/9dWcZ/

HTML:

<div class="header">
this is header
</div>

<div class="content">
  this is content
</div>

<div class="footer">
this is footer
</div>

CSS:

.header, .footer {
    width:100%;
    background:#999;
    height:200px;
    position:relative;
    float:left;
    clear:both;
    display:block;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
    float:left;
}

I need the header to be dynamic and maintain the structure. Any ideas?

Thank you.

cssdomlayout

Answer №1

To achieve this specific layout, you'll want to follow these steps.

Start by including a .wrapper element in your HTML structure:

<div class="wrapper">
    <div class="header">this is header</div>
    <div class="content">this is content</div>
    <div class="footer">this is footer</div>
</div>

Here is the CSS code you need:

.wrapper {
    display: table;
}
.header, .footer {
    width:100%;
    background:#999;
    height:200px;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
}

The crucial step is to set the display: table property for the .wrapper element.

Feel free to check out the demo here: http://jsfiddle.net/audetwebdesign/7jxLC/

Answer №2

Are you looking to increase the size from the middle point? If so, you can achieve this by using: margin-left:auto; margin-right:auto; This will cause it to expand in width starting from the center.

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

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

javascripthtmlcssreactjs

What is the best way to replicate floats using flexbox?

Currently, I am exploring the possibility of using flexbox in a similar manner as floats. My main aim is to have one child element create a column on the right side, while the rest of the children form another column on the left side. The challenge is that ...

cssflexboxcss-float

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

Incorporating Material-UI themes within styled components

Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected. You can view the problem here: sandbox. import React from "react"; import ...

cssreactjsmaterial-uistyled-components

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Creating a CSS grid layout with an unspecified number of columns all set to equal width

Currently, I am in the process of designing a navigation bar using grids. In essence, when the user is an admin, there should be two additional links at the end of the bar. These links need to have the same width and should not be affected by the amount of ...

htmlcssvue.jscss-grid

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

Hiding the last row of floated elements only if it is not an even row can be achieved using CSS

I am trying to find a quick and easy solution (either using CSS or jQuery) to hide the last row of floated elements if they are not even. Take a look at this JS Fiddle example: http://jsfiddle.net/cohhvfjn/ There is an issue when resizing the HTML contai ...

jquerycss

col-md is taking precedence over col-sm at lower screen resolutions

Col-md takes precedence over col-sm in Bootstrap 4 https://i.sstatic.net/ydL5O.png ...

cssbootstrap-4

What is the best way to adjust the size of an image using CSS, especially with flexbox

I'm attempting to arrange 3 images in a row using flexbox. I also need to adjust the size of the first image because it is too large. However, my CSS styles are not being applied correctly. Each image is enclosed in its own div with a class of flex-it ...

htmlcssflexbox

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

Update: I have found a solution that works. You can check it out here: https://codepen.io/kristianBan/pen/RwNdRMO I have a scenario with 3 images where clicking on one should give it a red outline while removing any outline from the other two. The first t ...

javascripthtmlcssfrontendweb-frontend

Resolved issue with fixed div flickering upon clicking link on Phonegap platform, leveraging Bootstrap

Upon attempting to click a link positioned at the bottom of the screen within a colored div using position:fixed;, I notice that the page momentarily flashes white before displaying the "new" page. Removing the fixed positioning allows the new page to load ...

htmlcsstwitter-bootstrapcordova

Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect. Could you please advise me on how to resolve this issue so that I can ...

javascripthtmlcssreactjsmaterial-ui

CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...

javascripthtmlcss

In Javascript, create a variable that dynamically updates for every child element

While this might appear to be a simple question, it has been troubling me for some time now. Let me elaborate on what I am trying to accomplish. I have a collection of images in a gallery, and my goal is to center each image vertically within its contain ...

javascriptjqueryhtmlcss

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

htmlcssreactjsmaterial-ui

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

cssangularcss-transitions

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

javascriptcssreactjsnext.jstailwind-css