Can I prevent a horizontal menu from wrapping?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • dkoro
    New Member
    • Mar 2011
    • 2

    Can I prevent a horizontal menu from wrapping?

    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:

    Code:
    body {
    	font-family:Arial, Helvetica, sans-serif; 
    	background-color:#c0e1e6; 
    	margin:0; 
    	padding:0;
    	}
    
    #wrapper {
    	overflow:auto;
    	}
    
    #top {
    	background-image:url(homepage-top.gif); 
    	background-repeat:no-repeat; 
    	height:108px; 
    	display:block;
    	}
    
    .colorbar-top {
    	height:38px; 
    	background-image:url(colorbar-top.gif); 
    	background-repeat:repeat-x;
    	}
    
    .colorbar-bottom {
    	height:22px; 
    	background-image:url(colorbar-bottom.gif); 
    	background-repeat:repeat-x;
    	}
    
    .maincontent {
    	background-color:#FFF; 
    	background-image:url(homepage-centerbkg.jpg); 
    	background-repeat:no-repeat; 
    	background-position:top left; 
    	height:293px; 
    	margin:0; 
    	padding:0;
    	}
    
    .interiorcontent {
    	background-color:#fff; 
    	margin:0; 
    	padding:20px; 
    	overflow:auto;
    	}
    
    a {
    	color:#0072b1; 
    	text-decoration:none; 
    	font-weight:bold;
    	}
    
    .bluetext {
    	color:#0072b1; 
    	font-weight:bold;
    	}
    
    .footer {
    	font-size:11px; 
    	color:#FFF; 
    	margin:0 100px 10px 100px; 
    	padding:10px; 
    	float:right;
    	}
    
    .leftmenu {
    	float:left; 
    	width:170px; 
    	font-size:14px; 
    	font-weight:bold; 
    	padding:0 10px 0 10px;
    	}
    
    .rightcolumn {
    	border-left-color:#c0e1e6; 
    	border-left-style:solid; 
    	border-left-width:1px; 
    	margin-left:200px; 
    	padding:0 0 0 25px;
    	}
    
    .goldtext {
    	color:#FF9C00;
    	}
    
    .graytext {
    	color:#C1C1C1;
    	}
    
    .smalltext {
    	font-size:10px; 
    	color:#B4B4B4;
    	}
    
    .clear {
    	clear:both;
    	}
  • VijaySofist
    New Member
    • Jun 2007
    • 107

    #2
    Hi,

    Set the Following to your Main Content
    Code:
    min-width: 3em; /* Set your own Size */
    width: 3em; /* Set your own Size */
    max-width: 3em; /* Set your own Size */
    Regards
    Vijay.R

    Comment

    Working...