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

This was chosen as the best answer

Put them inside something that can't shrink.

<title>minimum left position</title>

            background:         yellow; 
            padding:            20px; 
            border:             1px solid; 

            width:              500px; 
            position:           absolute; 
            right:              40px; 

            width:              300px; 
            margin:             20px; 

            position:           relative;
            top:                0px;
            width:              100%;
            min-width:          950px;

<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>
Answered over 9 years ago by Nathan Duran
  • Thanks so much! That didn't instantly come to me. Works great! Don Zacharias over 9 years ago