Full-width header with scrollable content within the viewport

Question

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.

css dom layout

Answer 1

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

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 3

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.

Answer 4

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.

Full-width header with scrollable content within the viewport

Answer №1

Answer №2

Similar questions

How can I adjust the size of posts on the Tumblr Official Theme?

Adjust the path of an element as it decreases in size

Personalize the color of tags in streamlit

Replace the pixel measurements with percentage values

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

Issues with locating the fonts: React-slick paired with nextjs

Upon the initial gallery load, the images are appearing on top of each

Switch out the content within a div upon selection

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

Trouble getting proper alignment displayed with JavaScript and CSS

Align a child element to the top and another child element to the center within a flexbox column

Adding click functionality to dynamically generated list items in jQuery and HTML

Can you show me how to magnify multiple images when hovering over them without altering their dimensions?

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

JavaScript- Tabbed Navigation with Lists as the Content

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

Using .htaccess to Conceal Directories with Documents

Creating uniform-sized flex items with varying image sizes

Nav bar width remains stagnant despite varying content lengths

Ways to Adjust Website Scaling for Varying Screen Sizes