Home/ Questions/Q 7915755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T14:33:57+00:00

I’m trying to make some decoration outside the main content div, that would be

  • 0

I’m trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.

I thought for a while and came up with the following markup, (you can copy paste and see it),
and that’s best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.

Here’s the code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            body {
                padding: 0px;
                margin: 0px;
                width: 100%;
                height: 100%;
                background-color: yellow;
            }
            div.content {
                display: block;
                width: 958px;
                height: 400px;
                background-color: #CCC;
                margin: 0px auto;
            }
            div.wrap {
                margin: 0px auto;
                min-width: 958px;
                max-width: 1058px;
                overflow: hidden;
                position: relative;
                background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
                background-position: center;
            }
            div.left, div.right {
                background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
                width: 50px;
                display: block;
                height: 50px;
                bottom: 0px;
                position: absolute;
            }
            div.left {
                right: 479px;
                margin-right: 50%;
            }
            div.right {
                left: 479px;
                margin-left: 50%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content">
                <-- Content
            </div>
        </div>
    </body>
</html>

So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!

EDIT:

This is what happens in Google Chrome on resize:

This is what happens in Google Chrome on resize

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As the browser has to re-calculate the margins based on the parent’s width changes, this is kind of expected behaviour.

    If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won’t be any element that should be affected by the .wrap position in the document flow, you could do something like this: 

    div.wrap {
            width: 1058px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -529px; /* 1058/2 * -1 */
            background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
            background-position: center;                
        }

    This will centralize the content horizontally in every situation.

    Hope it helps.

    • 0