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

Posted on 2011-10-26
Last Modified: 2012-05-12

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...
Question by:Simon Ball
    LVL 42

    Accepted Solution

    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?
    LVL 53

    Assisted Solution

    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.
    LVL 53

    Assisted Solution

    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.
    LVL 15

    Author Closing Comment

    by:Simon Ball
    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!

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now