Known Participant

Question

Left-shifted display of context on pages

Forum|Forum|1 day ago
June 11, 2026
10 replies
25 views

All my web pages (which is a blog with images) have shifted left, leaving a huge blank space on the right. It seems to be ok when viewed on a cell phone, but on laptops and computers, everything has shifted to the left. How do I get it back to the way it use to be? It's happening even on old pages that I developed years ago.

Nancy OShea

Community Expert

I yank the band-aid off in one swift motion. It’s less painful in the long run.

Absolute Positioning removes content from the normal document flow. Removing CSS will restore the natural flow, so unstyled content can be viewed in Dreamweaver.

Nancy O'Shea— Product User & Community Expert

B i r n o u

Legend

No problem. Let's separate the two issues, because they are probably different.

First, Dreamweaver itself.

If Dreamweaver's workspace looks messed up on your computer, that should not change the published pages on your website. It can make editing much more confusing, but it does not normally modify the online layout by itself.

You can try resetting the workspace:

Window > Workspace Layout > Reset

or switch to another workspace and then switch back again.

Adobe also has a help page about Dreamweaver workspaces here:
https://helpx.adobe.com/dreamweaver/using/dreamweaver-workflow-workspace.html

Then, for the website itself, I would not change too many things at once.

Make a full backup of the site folder first.

After that, test the `#wrapper` change from my previous message on one copied page only, and see what happens.

Once Dreamweaver's workspace is usable again, and once we know what the wrapper change does, it will be easier to move step by step through the APDivs and decide what needs to be repaired now, and what can be rebuilt later in a more responsive way.

But I would go progressively.

G

galvestongirlAuthor

Known Participant

Thank you both for your help. You’re right, Nancy. I started developing my pages in 2008 when I retired. Back then, I was able to follow the simple code rules; I didn’t deviate from them, and as a result I never really expanded my knowledge of html. Now, with all the changes to consider, I’m lost. Outside of conflicting stylesheets, I’m also having trouble with my DW desktop layout. It’s all out of whack. This started happening about three weeks ago, and I know I didn’t make any intentional changes. It’s like DW changed something. And I wouldn’t think that has anything to do with my stylesheet. Again, thank you. If you’ll bear with me, I’ll try to muddle through your suggestions.

B i r n o u

Legend

@Nancy OShea is right about the general problem. The page is made with a lot of APDivs / absolute positioning, so it is very sensitive to the width of the page.

But I would not start by deleting all CSS yet.

Since you say it happens on all pages, I would first check the shared stylesheet.

This rule looks suspicious:

#wrapper {
    width: 100%;
    max-width:1280px;
    margin: 0 auto;
    position: absolute;
}

The layout does not really look like a 1280px layout. Some elements are positioned much farther to the right than that, so the old page was probably designed on a wider fixed canvas.

As a quick repair, you could test something like:

#wrapper {
    width: 1600px;
    margin: 0 auto;
    position: relative;
}

That will not make the site responsive. It only brings back the old fixed-width desktop layout.
If that works for you, then the immediate problem is probably the wrapper width, not every individual APDiv.

The next step would be to move away from the APDiv approach and rebuild the content as a responsive layout.

But I would not do that in one shot.
Make a backup first. Git is fine for that, but even a simple duplicate of the whole root folder is better than working on the only copy.

Then use the existing APDiv layout as a visual guide and rebuild the pages brick by brick.

Nancy OShea

Community Expert

A basic 2 column layout:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox Starter Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
 background-color: #336666;
 color: antiquewhite;
 font-size: 1.2rem;
 margin: 0 auto;
 width: 90%;
}
/* Apply box-sizing globally to handle padding safely */
*, *::before, *::after {
 box-sizing: border-box;
}
.wrapper {
 display: flex;         /* Activates Flexbox*/
 flex-direction: row;   /* Aligns columns horizontally (default) */
 flex-wrap: wrap;       /* Allows wrapping for mobile responsiveness */
 gap: 20px;             /* Creates a clean gutter space between columns */
 width: 100%;
}
/* The child column elements */
.wrapper div {
 flex: 1 1 calc(50% - 10px); /* Grow, shrink, and take up roughly 50% width minus half the gap */
 padding: 20px;
 background-color: teal;
 border: 1px solid;
}

/* Responsive breakpoint for mobile screens */
@media (max-width: 768px) {
.wrapper div {
 flex: 1 1 100%;       /* Force columns to take full width and stack vertically */
}
}
</style>
</head>

<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quia aliquam quidem quas mollitia, suscipit dolor voluptatibus vitae quae provident placeat ut, reprehenderit ducimus ad doloribus perferendis, numquam magnam velit!</p>
</header>
<hr>
<div class="wrapper">
<!--two-column layout-->
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</div>

<footer>
<div><p>Footer content goes here...</p></div>
</footer>
</body>
</html>

And this is what it looks like in Live View.

Post back if you have any questions.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

A sea of APDivs and absolute positioning from competing external & internal CSS.

I’m guessing this site was created in early 2000s long before smartphones & tablets.

Quick solution: Remove all CSS from your web pages, external & internal. Scrap all styles.

It may not look pretty at first, but it gives you an unvarnished surface to work with. And that’s what you need to fix this properly.

Nancy O'Shea— Product User & Community Expert

G

galvestongirlAuthor

Known Participant

Here’s my website’s home page. www.thewanderingchick.com

Nancy OShea

Community Expert

Without a link to your online page, you’re making us guess what might be happening. 🤔

Left-aligned content is the default browser behavior. To center content horizontally, you need three things:
1. Valid document type.
2. A stated width for your container.
3. Auto left & right margins.

For layouts made with Bootstrap ver 4 & higher, use the mx-auto class for centering.

https://getbootstrap.com/docs/4.0/utilities/spacing/

The other issues could be invalid code.
1. Validate your site pages in DW.
  
  Window ⇒ Results ⇒ Validation
2. Check all documents and fix reported errors.

Hope that helps.

Nancy O'Shea— Product User & Community Expert

B i r n o u

Legend

a link will probably helps ;)

G

galvestongirlAuthor

Known Participant

Sorry, meant a display of content (images and text)...

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded