When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping!

  1. The header should have the same width as the footer, 100%
  2. The menu should stack with the header and footer
  3. The content should be centered on the page and stack with the other divs when the browser is resized, avoiding overlap

Here is a link to a picture illustrating the problem:
https://docs.google.com/file/d/0B5Ki_dh4A-VJd2VNZ1o5b0RzQmc/edit?usp=sharing

And here is a link showing how it should look:
https://docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/edit?usp=sharing

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

        #headr{                
            height: 100px;
            width: 100%;
            background-color: #33ff33;
            top: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;
        }

        #menu{
            height: 100%;
            width: 150px;
            background-color: #ccff00;
            left: 0;
            top: 0;
            position: fixed;
            border: 1px #000 solid;

        }
        #content{

            background: rgba(225, 225, 225, 0.5);
            border: 1px #000 solid;
            height: 600px;
            width: 800px;
            margin-left: -400px;
            margin-top: -300px;
            left: 50%;
            top: 50%;
            position: fixed;



        }
        #footer{
            height: 35px;
            width: 100%;
            background-color: #ff3300;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;

        }

    </style>


</head>
<body>
    <div id="headr"><p style="text-align: center;"> 1. Head</p></div>
    <div id="menu"><p style="text-align: center;"> 2. Menu</p></div>
    <div id="content"><p style="text-align: center;"> 3. Content</p></div>
     <div id="footer"><p style="text-align: center;"> 4. Footer</p></div>


</body>

Answer №1

Hey there, could you take a look at the code provided in the following link: http://jsfiddle.net/9gPMR/99/

This code demonstrates how to use display:table and table-cell to make elements fit in the window.

If you have any questions or suggestions regarding this solution, feel free to let me know.

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

Guide on how to toggle disabled input text box upon checking checkbox using JavaScript

When the checkbox next to the appended text box is checked, I want to disable that text box. The hard-coded text box is already disabled when its checkbox is checked. You can see the actual outcome by running the code snippet or check out the screenshots b ...

Here's how you can pull information from a MySQL database and showcase it on an HTML

I successfully created a database in MySQL where users can enter their details on /upload.html, which then get stored in the test2 database and person_list table. However, I am facing an issue with displaying this data on /download.html. My goal is to hav ...

What is the secret behind Redactor JS's ability to display properly indented code snippets?

If you take a look at the Redactor JS demo and click on the button to show the HTML source code of the displayed content... ...you will notice that the code is properly indented: Most rich text editors or wysiwyg editors typically display code in a singl ...

What is the best way to make the Bootstrap navbar stay fixed at the top of the

I am currently experiencing an issue with the Bootstrap navbar while using version 5.0. Whenever the Bootstrap navbar expands, the content below it also moves down, which is not the desired behavior. I want the content to remain in place. I tried set ...

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

Unable to conceal adjacent element when z-index is set as 1

I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

Troubleshooting AJAX hover functionality issue

Here is the content that loads through AJAX: <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title< ...

Slider Carousel for Multiple Items: Horizontal Orientation

I attempted to create a multi-item carousel slider using Bootstrap and found some code online to help me. However, the code is not functioning correctly. The issue is that the cards are not displaying next to each other horizontally as they should. Unfortu ...

The tag (p) is not located in a valid position

I am currently working with the following code snippet: <p class="pHelp"> xxxxx <a href="#components">Form components</a> yyyyy </p> This particular line is located within a long chain of nested HTML tags inside html/body/a/a/a/a/ ...

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

My website contains numerous pages with a plethora of small images that need to be loaded. To enhance user experience, I devised two methods to first display a subset of the content without waiting for the entire page to load. The data is stored in a .json ...

Is there a way to detect when the browser's back button is clicked?

As I work on supporting an e-commerce app that deals with creating and submitting orders, a user recently discovered a loophole wherein they could trigger an error condition by quickly pressing the back button after submitting their order. To address this ...

Scalable Vector Graphics Form Field

I'm looking to enable user input in one of my SVG text fields when they click on it. Any ideas on how to achieve this? const wrapper = document.getElementById('wrapper'); const text = document.getEl ...

The model name should not be overridden if it is already being used in different fields

I have a model that I am binding on two sides. The first side is inside an html p tag, and the second side is a textarea. When I make changes to the textarea, the content inside the p tag also changes. How can I ensure that only the content in the textar ...

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

I am attempting to activate the "about us" button on the website. I have successfully included the path and added a router link to the containing div of the button. However, there seems to be something

In my app, the first step involves specifying the path in the routing module. Following that is defining the home component, then the app component, and finally creating the button using HTML. Setting up the path in the app.routing.module.ts file <div ...

Is it possible to align an entire column to the right in the Material UI Data Grid?

I'm currently exploring Material UI and grappling with a specific challenge. Is there a method within Material UI to create a Data Grid with two columns, one left-aligned and the other right-aligned? I've managed to align the headers as desired, ...

Choose a Vue filter according to the variable selected

My Current Table Dilemma Creating a table from a 2D array in Vue2 has been successful for me, as I've managed to display all the values correctly. However, I am facing issues with formatting. The template code is structured like this: <table> ...

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Is there a way to incorporate external CSS or another method to apply styles to a PowerBI report embedded in an Angular application as an iframe? Specifically, I want to remove the scrollbar to ensure that the report seamlessly fits within the angular page ...