css - floating menu - want to "use min-width"


my first little website for my friend is coming along nicely now and i have learned a lot from my other question thread about CSS...

I had it working nicely, with Minwidth, so that my col one kept itsz text visible when the browser was made thinner, and on my nokia phone.....


ONce i added some photo's and my pges got more than a standard browser height, so i used the suggested code to add in a "static menu, which maintains its page position regardless of scrolling... which is nice.

But now my minwidth is not being taken into account anymore on the parent column.

please have a look at


and then reduce your browser width..

nasty overlapping of text and photo etc...

does not occur on the home page, which does not have the same menu div...
LVL 15
Simon BallAsked:
Who is Participating?
David S.Connect With a Mentor Commented:
That's the problem with using "position:fixed". In this case you could give "min-width:880px" to "#content-wrapper" to fix that in desktop browsers.

> But now my minwidth is not being taken into account anymore on the parent column.

That's because "position:fixed" (and "position:absolute") remove elements from the "flow" of the document, so other elements can't tell that they are there.

By the way, a <ul> may not be directly nested within another <ul>. It should be inside the same <li> that includes the content that it hierarchically appears under.

Are you aware that your page contains XHTML errors?
COBOLdinosaurConnect With a Mentor Commented:
But now my minwidth is not being taken into account anymore on the parent column.

The min-width is being respected.  You have it on the menu, and the menu does not get any narrow.  it move over a little but it maintains minimum width.  the problem is that there is no min width on the rest of the page.
Thus, you get overlap because the fixed position change the content of the body.  The menu is attached to the window and so the the browser renders exactly as you have programmed it to do.
COBOLdinosaurConnect With a Mentor Commented:
The appropriate place to use min-width is usually on the body, but if you do that remember that the width of the fixed element will not be part of the calculation the browser makes.
Simon BallAuthor Commented:
thanks guys.  fixed validations and played with css to get it working in opera, chrome, firefox and nokia browser... ought to check IE i suppose!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.