[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

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

Hello,

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

however,

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

http://www.monicadances.com/about.html

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...
0
Simon Ball
Asked:
Simon Ball
  • 2
3 Solutions
 
David S.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?
http://validator.w3.org/
0
 
COBOLdinosaurCommented:
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.
0
 
COBOLdinosaurCommented:
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.
0
 
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!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now