How to perfectly align content on a webpage

Can someone help me understand why my webpage is off-centered as it scales up? I have set a minimum width of 1000px, but it still appears to be centered at 30%-70%. Any insights on this issue would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">


#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

</style>
</head>
<body>
<div id="page">
    <img id="pageImg" src="../Navigation/backgroundImg.png" />
    <div id="navBar">
        <img id="navBarImg" src="../Navigation/navBarBGImg.png" />
    </div>
</div>
</body>
</html>

Answer №1

Have you considered adjusting your page width to 50% instead of sticking with 75%? It seems like your current result might be the product of multiplying 75% by 75%...

For example, you can check out this code snippet: http://jsfiddle.net/rob_towner/q8vKK/

#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}

Answer №2

It seems like there is some additional code that you haven't shared yet, but based on the code you did provide, it appears to be working as intended. You can view a live example here. Keep in mind that the 1000px width may not fit in the default window size, so use the sliders to expand and test your code.

The CSS I utilized:

#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

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

The HTML and JavaScript implementation of the Game of Life is experiencing technical difficulties

I attempted to create my own version of the Game of Life using HTML canvas and JavaScript. With the aid of various online tutorials, I was able to write a piece of code that I am still confident in. However, upon launching the HTML page in the browser and ...

Exploring the Scope of LocalStorage in Javascript

I've recently begun working with local storage and encountered some scope issues. Whenever I try to console.log(test), the second if statement returns undefined. What am I missing here? This is my current code; $("document").ready(function(){ ...

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

As I prepare to launch my website, I have made adjustments to the mobile layout by moving the navigation links to a navigation drawer. The template I am using included JavaScript scripts to handle this navigation change. However, I encountered an issue whe ...

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

What is the overlay feature in Material-UI dialogs?

I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user ...

Ensure the scrollbar is noticeable and personalized solely within a designated div, such as the left side menu

In the left side menu, I have set the overflow-y: scroll property and a fixed height that is smaller than the entire page's height. I am trying to make the scrollbar always visible only within this left menu. I attempted using -webkit-scrollbar and -w ...

The validation process is still failing even though the correct credentials have been entered

I'm diving into the world of Javascript and DOM today, but I've hit a roadblock. Can you take a look at this code snippet and help me figure out what's causing me to always end up in the else block, no matter what I input in the text field? ...

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

What is the best way to link a generated PHP-AJAX link with a jQuery action?

Imagine a scenario like this: trollindex.htm: [...] <script> $(document).ready(function(){ $("* a.jquery").on("click",function(){ $.ajax({ type: "POST", url: "trollcommander.php", data: ({comman ...

Updating comment content using Ajax

I am in the process of using Ajax to insert my comment content. However, I seem to be facing some issues with the comment_add.php page. I was hoping someone could review it for me. While I have successfully obtained the streamid as checked in firebug, no ...

Achieve full height Bootstrap styling by nesting it inside a row div

Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content? I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated. <body> < ...

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

Retrieving list item contents using PHP DOM scraping

Is it possible to use PHP DOM screen scraping to extract the content from an HTML tag named <li style="margin-top:10px"> that appears on one of my web pages? I am looking to retrieve all the data within the <li> tag and present it as HTML co ...

Using jQuery, how can I add value to every input when the option is changed?

I need help changing the values of all input:text elements based on selections from a select menu. Specifically, I want to change only the matched td.class values from the data-pset attribute inside the <select>. As a beginner in jQuery, I can only ...

Creating a diagonal division border using CSS alongside a background image

I've been attempting to place 2 divs next to each other with a diagonal space between them. While I've come across several tutorials and discussions on Stack Overflow about creating diagonal divs, they often involve using borders with solid color ...

Issues persist with the textarea failing to update the longtext data field

I'm having trouble updating a longtext data cell in my database when I save and post to the same page using a simple form with a textarea. Despite not receiving any PHP errors, the database just doesn't seem to update and I can't figure out ...

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? ...

Tips for sending php data to javascript efficiently

I'm wondering about the best way to retrieve HTML table rows and display the values on another page upon clicking a button. Ideally, I would like to store these variables in a session for future use. Any advice on how to proceed? ...

What effect does setting div1 to float left have on the layout of div2 in css?

Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...