Resizable page with min-width and position absolute?

Question

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

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?

ipopa · Accepted Answer · 2014-10-07T11:05:17.263

13

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

edited Oct 07 '14 at 11:05

answered Mar 17 '11 at 11:11

ipopa

1,223
11
12

If i do like you suggested, it overlaps the green content with text instead of "resizing it".. The min-width works now though :S Like here: http://pastehtml.com/view/1doa3jv.html – Mar 17 '11 at 11:47
add margin-right:220px; to the div with the text; and if u want to move the green background to it. – ipopa Mar 17 '11 at 12:52
actually this fixed my problem, i'm really interested to know why it is like this? is it a bug? i don't think so because all the browsers behaved like each other in my case. the relative div should be realtive to absolute div, but putting an absolute div inside of a relative div is not what i had in mind! – jim Nov 27 '12 at 19:01

score -1 · Answer 2 · answered Jul 05 '13 at 08:33

-1

I have a fix !

It's weird though:

body{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    min-width:1300px;
    width:100%;
    overflow:auto;
    padding:0;
    margin:0;
}

answered Jul 05 '13 at 08:33

Morg.

697
5
7

Resizable page with min-width and position absolute?

2 Answers2