The element residing within the body exceeds the body's dimensions

HTML :

<body>
<header>
    <div>
    </div>
</header>
</body>

CSS :

body { width : 1000px ; }
header { width : 100% ; }

If these codes are implemented,
The header's width should be the same as the body's width.

However, it didn't work as expected.
Check out the code here: http://jsfiddle.net/o3omng/q4xewdew/

In the provided code, the .header's width is larger than the body's width.
Avoid simply adjusting the CSS like ".header { width : 1000px ; }"
since I am creating a responsive website. Please use percentages instead.

htmlcss

Answer №1

When you set the header to have a fixed value, it no longer adheres to the position and dimensions of its parent element. Instead, it remains in a fixed position on the screen based on your specified location (top/left/bottom/right) and dimensions.

This means that if you want your header to always be visible on the screen and maintain a specific width regardless of the body content, you need to consider how it will interact with responsiveness and other design elements. For example, if you want a fixed position header that spans the full width of the screen but also maintains a maximum width limit of 1100px for the entire page, you can use the following code:

body {
    background : #f8f8f8 ;
    height : 2000px ;
    width: 100%;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
}

.header {
    position : fixed ;
    border-bottom : 1px solid #f1f1f1 ;
    width : 100% ;
    max-width:1100px;
    background:#ddd;
}
.header img {
    display : block ;
    margin-left : auto ;
    margin-right : auto ;
    margin-top : 50px ;
    margin-bottom : 50px ;
}

Answer №2

To improve the layout, consider adjusting the positioning of the headers.

position: relative;

You might also want to modify the styling of your images:

margin-top: 50px;

Try changing it to:

padding-top: 50px;

If you prefer not to shift the entire body down by 50px with margin-top.

Answer №3

You've already identified the answer yourself - using percentages instead of fixed sizes is key. Simply adjust your CSS as shown below and it should solve the issue:

* { margin: 0%;
    padding: 0%; }

body { background: #f8f8f8;
       height: 2000px;
       width: 100%;
       margin: 0 auto; }

.header { position: fixed;
          border-bottom: 1px solid #f1f1f1;
          width: 100%;
          background: #fc0; }
          
.header img { display: block;
              margin-left: auto;
              margin-right: auto;
              margin-top: 5%;
              margin-bottom: 5%; }

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

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

How can I retain the selected values in a form after it is submitted? My current code functions correctly when only one value is selected, but does not maintain all selected values when multiple are chosen simultaneously. Any assistance would be apprecia ...

javascriptphphtmlforms

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element

Hey everyone, I've come across an issue with using next/link in my code. Every time I replace the anchor tag with the "Link" tag, I encounter an error. I've searched for a solution but haven't found one yet. Any help would be greatly appreci ...

cssreactjsnext.js

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss

What is the method for switching the parent element following the adjustment of the selected child's opacity

I am trying to find a way to use CSS to adjust the parent element's opacity if it contains a child element with a specific class. Currently, I have only been able to achieve this on hover by adding a background color to the parent element's ::aft ...

htmlcss

Some of the CSS code in my file is not displaying properly on my ejs file

For some reason, only the CSS styles for my footer are rendering on my ejs file. The rest of my CSS doesn't render at all. I've tried defining the path of my static files to my views directory using the path method: app.use(express.static(path.jo ...

cssnode.jsexpressejs

JS form validation malfunctioning

XHTML <form name="suggestion" method="post" action="suggestion.php" class="elegant-aero" onSubmit="return validate()" > <label> <span>Message :</span> <textarea id="Message" name="m ...

javascripthtml

"Create a New Browser Tab When User Interacts with a Hyperlink leading to an External Website

I am currently working on a recommendations app built with React and I want to enable users to navigate to external websites when they click on a component that displays information about that website. At the moment, I have implemented a wrapper that, upo ...

javascripthtmlreactjsnext.js

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

javascriptjqueryhtmlweb

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

Checking for duplicate entries in an array created with the Angular form builder

I am currently utilizing angular6 reactive form with form builder and form array. The issue I am encountering is duplicate subject entries from the drop down in the form array. How can I implement validation to prevent duplicate entries in the form array? ...

javascripthtmlangularangular-reactive-formsangular-formbuilder

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml

"Eliminate any inline styling from a string element with the power of JavaScript/j

If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...

javascriptjqueryhtmlregex

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

javascriptphpjqueryhtmlcss

How to use Python Selenium to locate the parent element

Here is a snippet of my HTML code: <li> <div class="level1"> <div id="li_hw2" class="toggle open" </div> <ul style="" mw="220"> <li> <div class ="l ...

pythonhtmlseleniumxpath

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

I am having trouble getting my custom CSS file to be applied to my website on Github pages

I attempted to upload a custom CSS file to apply on The raw CSS file is located at: https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css I used the following as my href since it directly links to the raw CSS file: href="http ...

htmlcssgithub

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Eliminating empty space within my container

I am facing an issue with a container that contains an image and a button on top of it. There seems to be some extra space created within the container on the right side which is taking up more space than necessary. The layout consists of three horizontal ...

htmlcssimagebuttondivision

Struggling to get collapsible feature functioning on website

I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...

javascripthtmljquery