Resizable page with min-width and position absolute?

position absolute resizable css
donpedroper picture donpedroper · Mar 17, 2011 · Viewed 8.3k times · Source

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?

Answer

Ionut Popa picture Ionut Popa · Mar 17, 2011

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

Related questions

JQuery Resizable Draggable Position Absolute

Take a look at this -> http://jsfiddle.net/Zj23S/1/ I am using resizable and draggable. The problem I am facing is with draggable. I cannot seem to drag outside of the div, probably because I set div.…

Read More
Position: absolute and parent height?

I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them? Here's the code: HTML <section id="foo"> <header>Foo</header&…

Read More
React Native absolute positioning horizontal centre

It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even using dimensions to detect height and width …

Read More