By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,140 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

Can I prevent a horizontal menu from wrapping?

P: 2
I've created a simple page which uses two buttons for navigation. I want the page to be "fluid" (resizing your window won't affect the main content) and I think I've accomplished that except for one thing that the programmer I'm working with pointed out, that is the two buttons will wrap if the window gets resized to that point (I assume he's thinking about how it will look on a mobile device). Is there a better way to redo the navigation using some CSS tricks?

Here's the style sheet:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     font-family:Arial, Helvetica, sans-serif; 
  3.     background-color:#c0e1e6; 
  4.     margin:0; 
  5.     padding:0;
  6.     }
  7.  
  8. #wrapper {
  9.     overflow:auto;
  10.     }
  11.  
  12. #top {
  13.     background-image:url(homepage-top.gif); 
  14.     background-repeat:no-repeat; 
  15.     height:108px; 
  16.     display:block;
  17.     }
  18.  
  19. .colorbar-top {
  20.     height:38px; 
  21.     background-image:url(colorbar-top.gif); 
  22.     background-repeat:repeat-x;
  23.     }
  24.  
  25. .colorbar-bottom {
  26.     height:22px; 
  27.     background-image:url(colorbar-bottom.gif); 
  28.     background-repeat:repeat-x;
  29.     }
  30.  
  31. .maincontent {
  32.     background-color:#FFF; 
  33.     background-image:url(homepage-centerbkg.jpg); 
  34.     background-repeat:no-repeat; 
  35.     background-position:top left; 
  36.     height:293px; 
  37.     margin:0; 
  38.     padding:0;
  39.     }
  40.  
  41. .interiorcontent {
  42.     background-color:#fff; 
  43.     margin:0; 
  44.     padding:20px; 
  45.     overflow:auto;
  46.     }
  47.  
  48. a {
  49.     color:#0072b1; 
  50.     text-decoration:none; 
  51.     font-weight:bold;
  52.     }
  53.  
  54. .bluetext {
  55.     color:#0072b1; 
  56.     font-weight:bold;
  57.     }
  58.  
  59. .footer {
  60.     font-size:11px; 
  61.     color:#FFF; 
  62.     margin:0 100px 10px 100px; 
  63.     padding:10px; 
  64.     float:right;
  65.     }
  66.  
  67. .leftmenu {
  68.     float:left; 
  69.     width:170px; 
  70.     font-size:14px; 
  71.     font-weight:bold; 
  72.     padding:0 10px 0 10px;
  73.     }
  74.  
  75. .rightcolumn {
  76.     border-left-color:#c0e1e6; 
  77.     border-left-style:solid; 
  78.     border-left-width:1px; 
  79.     margin-left:200px; 
  80.     padding:0 0 0 25px;
  81.     }
  82.  
  83. .goldtext {
  84.     color:#FF9C00;
  85.     }
  86.  
  87. .graytext {
  88.     color:#C1C1C1;
  89.     }
  90.  
  91. .smalltext {
  92.     font-size:10px; 
  93.     color:#B4B4B4;
  94.     }
  95.  
  96. .clear {
  97.     clear:both;
  98.     }
Mar 30 '11 #1
Share this Question
Share on Google+
1 Reply


VijaySofist
100+
P: 107
Hi,

Set the Following to your Main Content
Expand|Select|Wrap|Line Numbers
  1. min-width: 3em; /* Set your own Size */
  2. width: 3em; /* Set your own Size */
  3. max-width: 3em; /* Set your own Size */
  4.  
Regards
Vijay.R
Mar 30 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.