Search code examples
positionabsoluteresizablecss

Resizable page with min-width and position absolute?


I'm working on a resizable page with a sidemenu to the right, and it almost works as supposed on this simple example:

http://pastehtml.com/view/1do8cy9.html

The problem though is that position auto and min-width dont react as expected. If you drag the browserwindow smaller than 500px (as the min-width is set to), the red sidemenu continues over the green content..

How do I make the sidebar stop when it reaches the min-width, fx 500px?


Solution

  • The absolute positioned div should be inside the min width div which should have position relative

    Edit, better explanation:

    For the sidebar: add top: 0 to the red sidebar and place it inside the min-width container.

    For the container: replace the margin-right property with padding-right and add position:relative