Is there a way to position an element on the right of the screen, with a "minimum left margin" so that it will not overlap elements to the left?

Start with the window sized about 1024x768. When the window is resized to closer to 800x600 I want #banner to stop moving left so that it does not overlap #content. At a certain point, `#banner should stop moving and be cut off on the right side of the window.

Thanks in advance!

1 answer

2
points
This was chosen as the best answer

Put them inside something that can't shrink.

<html>
<head>
<title>minimum left position</title>
    <style>

        .box 
        { 
            background:         yellow; 
            padding:            20px; 
            border:             1px solid; 
        }

        #banner 
        { 
            width:              500px; 
            position:           absolute; 
            right:              40px; 
        }

        #content 
        { 
            width:              300px; 
            margin:             20px; 
        }

        #wrapper
        {
            position:           relative;
            top:                0px;
            width:              100%;
            min-width:          950px;
        }

    </style>
</head>
<body>
<div id="wrapper">
    <div id="banner" class="box">don't let me overlap the content</div>
    <div id="content" class="box">I am the content, I am super important</div>
</div>
</body>
</html>
Answered over 6 years ago by Nathan Duran
  • Thanks so much! That didn't instantly come to me. Works great! Don Zacharias over 6 years ago