CSS - Menu Width Ignored By Ie

Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen.

Thanks.

Hi, I'm very new, so please be gentle.

I don't know much about CSS but have been trying to make a drop down menu for my website. I managed to find the basics of what I wanted on a CSS site and know enough to have been able to tweak it (almost) to my requirements.

My problem is that the dropdown column widths are set and ideally I'd like them to adjust according to the amount of text which is to be displayed (I hope I'm making sense here), but I don't know how. I tried setting the width to automatic, but all that did was give me a huge column the width of my screen!

I've pasted the code and wonder if anyone would be good enough to tell me if it's possible to do what I want and if it is, could you point me in the right direction please?

Many thanks,

Alison

Quote:
.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#ffffff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#6c3600; background: url(three_1.gif) no-repeat;}

#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #FE9A2E; padding:5px; border:1px solid #fe9a2e; white-space:nowrap; width:145px; height:auto; z-index:300;}

#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:145px; font-weight:normal;}

#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:145px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #fe9a2e;}

#nav li ul.sub li a.fly
{background:#FE9A2E url(arrow_over.gif) 135px 6px no-repeat;}

#nav li:hover ul.sub li a:hover
{background:#F5D0A9; color:#6C3600; border-color:#ffffff;}

#nav li:hover ul.sub li a.fly:hover
{background:#F5D0A9 url(arrow_over.gif) 135px 6px no-repeat; color:#6C3600;}

#nav li b {display:block; font-size:15px; height:18px; width:225px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:145px; top:-4px; background: #fe9a2e; padding:3px; border:1px solid #F5D0A9; white-space:nowrap; width:225px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#F5D0A9 url(arrow_over.gif) 130px 6px no-repeat; color:#6c3600; border-color:#fe9a2e;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#fe9a2e url(arrow_over.gif) 130px 6px no-repeat; color:#FFFFFF; border-color:#fe9a2e;}

Hi,

I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter.

The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space.

The code for this element:

Code:

#menu ul {
list-style: none;
margin: 0;
padding: 0;

/*change for IE6*/
/*width: 7em;*/

/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/

/*
width: auto;
min-width: 40px;
*/

float: left;
}

Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically.

After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible?

Thanks.

I'm using the suckerfish drop down method to get ie6 to work.

For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px.

I have #menu li ul {width:213px}

I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page.

I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place.

This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave.

Here's the menu stylesheet:

Code:

#menu {
	width:860px;
	height:80px;
	position:relative; margin:auto;
	border:solid 1px #000; border-bottom:none;
	list-style:none;
	z-index:6000;
	}
#menu ul {
	list-style:none;
	padding: 0;
	margin: 0;
	float:left;
	}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
	margin: 0;
	height:80px;
	float:left;
	list-style:none;
	}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
	height:38px;
	width:215px;
	display:block;
	padding:12px 0px 0 0px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	font-variant:small-caps;
	background:url(../images/navigation.jpg) no-repeat;
	}
#menu li.apply a {
	background:url(../images/navigation.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
	text-decoration:none;
	height:38px;
	background:url(../images/navigation-hl.jpg) no-repeat;
	font-variant:small-caps;
	}
#menu li.apply a:hover {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a	{
	background:url(../images/navigation-hl.jpg) no-repeat;
	}
body.ap #menu li.apply a {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	}
	


#menu li ul {
	width:213px;
	display: none;
	z-index:7000;
	border:solid 1px #000; border-top:none;
	background:#bbbcef;
	}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
	background-image:none;
	color:#333;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	margin:0;
	text-align:left;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
	background:#ffeecd; background-image:none;
	color:#000;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul { 
	display: block; 
	}	

What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion.

Code:

#rightnav {
	margin-top:14px;
	background-image:url(../images/loader.gif);
	background-position:center center;
	background-repeat:no-repeat;
	width:282px;
	overflow:hidden;
}
#rightnav hr {
	color:white;
	background-color:white;
	height:1px;
	border:none;
	width: 250px;
	margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
	height:306px;
	float:left;
}
#wslist {
	background-color:#336699;
}

.list {
	width:282px;
	float:left;
}

HTML as follows:

<div id="rightnav">
	<div id="rightbox">
		<div id="wslist">
			<div id="video">
				Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
			</div>
			<hr />

			<div class="list">
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">Why is my family so screwed up?</p>
					<p id="vidSub">What to do when families fight</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">This my second Title</p>
					<p id="vidSub">A video on titles</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">This is my third title</p>
					<p id="vidSub">Yay for subtitles, esp ESL</p>
				</div><div class="clearfix"><!--cleared--></div>
				<hr />
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">Four titles are great though</p>
					<p id="vidSub">I am full of English SDH</p>
				</div><div class="clearfix"><!--cleared--></div>
				<hr />
			</div>
			<div class="list">
				<div id="icon"><img src="images/cam.png" /></div>
				<div id="vidText">
					<p id="vidTitle">I am the outcast of the group</p>
					<p id="vidSub">Mah.. nobody loves me</p>
				</div>
				<div class="clearfix"><!--cleared--></div>
				<hr />		
			</div>
			<div class="clearfix"><!--clear--></div>
		</div>
	</div>
</div>

What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it.

Any suggestions?

I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height : 31px;
display : block;
}

#menu1main a { /* Top drop down menu hover styles */
display : block;
color : #000000;
text-decoration : none; 
border : none;
background-repeat : no-repeat;
}

.menu1 .menu1list { /* Hide top drop down menu submenu */
display : none;
}

.menu1, .display { /* Top drop down menu top level styles */
float : left;
width : 110px;
text-align : center;
vertical-align : middle;
font-family : Comic Sans MS;
font-size : 10pt;
line-height : 31px;}

/* Top drop down menu submenu hover styles */
a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { 
background-image : url('image/menu_banner_1.jpg');
background-position : 12px 50% ;
}

a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
background-image : url('image/menu_banner_2.jpg');
background-position : 12px 50% ;
}

/* Top drop down menu submenu hover styles */
a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { 
display : block;
text-decoration : none; 
border : none;
color : #000000;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 130px;
}

a.menu1lv2:hover, a.menu1lv2:active { 
background-image : url('image/menu_cube_1.gif');
background-position : 0% 100% ;
background-repeat : no-repeat;
}

a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
font-weight : bold;
} 




The HTML for this is:
Code:

<div id="menu1main">

<div class="menu1" 
  onmouseover="this.className='display'"
    onmouseout="this.className='menu1'">
        <a class="menu1b1lv1" href="">Intro</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Title</a>
        <a class="menu1lv2" href="">Part 2 Title</a>
        <a class="menu1lv2" href="">Part 3 Title</a>
        </div></div>
<div class="menu1" 
  onmouseover="this.className='display'"
	  onmouseout="this.className='menu1'">
        <a class="menu1b2lv1" href="">Chapter 1</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Long Title</a>
        <a class="menu1lv2" href="">Part 2 Long Title</a>
        <a class="menu1lv2" href="">Part 3 Long Title</a>
        </div></div>
</div>

The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
 ul.top { /* Top drop down menu styles */
    display : block;
    padding : 0;
    margin : 0;
    border : none;
    font-family : Comic Sans MS;
    font-size : 10pt;
    text-align : center;
    vertical-align : middle;
}

#topnav li.topnav0 { /* Top drop down top level menu styles */
    position : relative;
    float : left;
    background-image : url('image/menu_banner_1.jpg');
    background-position : 50% 0% ;
    background-repeat : no-repeat;
    width : 110px;
    line-height : 31px;
}

#topnav li.topnav0 a { /* Top level link styles */
    color : #000000;
    text-decoration : none;
}
     
li.topnav0 a:hover { /* Top level hover styles */
    text-decoration : none;
    font-weight : bold;
}
     
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
    text-decoration : none;
    background-image : url('image/menu_cube_1.gif');
    background-position : 0 50% ;
    background-repeat : no-repeat;
}

li.topnav0 ul.topnav1 {/* Drop down box style */ 
    display : none;
    background : #FFFFFF;
    padding : 0;
    margin : 0;
    position : absolute;
    top : 100%;
    left : 0;
}

#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
    display : block;
    padding : 0;
    margin : 0;
    text-indent : 16px;
    text-align : left;
    font-size : 8pt;
    line-height : 20px;
    width : 250px;
}

#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
    display : block;
} 




And the HTML is as follow:
Code:

<div>
	     <ul class="top" id="topnav">
               <li class="topnav0"><div><a href="#">Home</a></div>
               </li>
               <li class="topnav0"><div><a href="#">Intro</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Title</a></li>
                         <li><a href="#">Part 2 Title</a></li>
                         <li><a href="#">Part 3 Title</a></li>
                    </ul>
               </li>               <li class="topnav0"><div><a href="#">Chapter 1</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Long Title</a></li>
                         <li><a href="#">Part 2 Long Title</a></li>
                         <li><a href="#">Part 3 Long Title</a></li>
                    </ul>
               </li>
          </ul>
</div>

The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.

Any help of making either method to work is great appreciated! Thank you very much!

I found this code online and I'm trying to alter it slightly for what I need.

Code:

<html>
<head>
<style type="text/css">

body,html {

	padding: 0;
	margin: 10;
}

#navcontainer ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

#navcontainer ul li {
	display: inline;
}

#navcontainer ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #acf;
}

</style>
</head>
<body>

<div id="navcontainer">

<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>

</div>
</body>

It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width?
Say I want them all width: 180px; Where do I put that style so that it applies to all the links?

[On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?]

Thanks Much.
j 9

I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss....

Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width.

?????????/

Hi,

Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance.

Here is the CSS code and Html code for your reference:

CSS:

Code:

<style type="text/css">

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}


.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}

HTML Code:

Code:

<table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;">
	<tr>

		<td background="menubg.jpg" align="center">
		
<div class="horizontalcssmenu" align="center">
<ul>

<li><a href="default.htm">Home</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> 


<li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> 

<li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Service</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">References</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li>

</ul>
</div>
		</td>
	</tr>
</table>

Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated.

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen.

The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content.

Is there a way to get this effect?

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html