>> Hi all, I seem to be having a bit of a problem getting a div to fill the >> width of the screen. Here's the trouble page: >> http://www.rit.edu/upub/new/contact_us2.html >> >> Can anyone help me get the maincontent div to fill the remaining width of >> the screen? > > In order to get it to fill the width of the page, you have to leave a > width off, and you can't float it. If you float it, it will expand to > the width of its content -- and you have a bunch of blocks in there that > want to be 100% of the window. They successfully become 100% of the > window and push #maincontent down in the process. > > So, remove the width and the float and apply "margin-left: 180px" to > #maincontent. Your new problem then becomes that the clearers you have > within #maincontent are clearing the #sidebar too. This is because > #sidebar and #maincontent are in the same "block formatting context." > You need to create a new block formatting context for #maincontent so > that clearers within it pay no mind to #sidebar. The float you had on > there before was establishing a new context, but it was unusable with a > fluid layout. Luckily, you have several different ways: > http://www.w3.org/TR/CSS21/visuren.html#q15 > > I applied "display: table-cell" to #maincontent in Firefox and it worked > great. If this doesn't work in other browsers, you can try "display: > inline-block" on them.
Thanks for your reply, Zoe. It's always encouraging when someone compliments someone else's work. With this nagging clearer/float problem, I needed a boost of encouragement. That being said. I am still having problems and was wondering if anyone had any more ideas. I've tried your suggestions of "display:table-cell" and "display:inline-block." The table-cell works mostly in Firefox (but then the maincontent div doesn't fill the whole screen at a large screen size), in IE the table cell has a space between the contacts (because of the nav on the left and clearer). With the inline-block method Firefox does what IE was doing with table-cell. All I can say is UGH! Add to this the fact that I need a sidebar on the right, and I just can't win because then even if I get the left side working correctly, the sidebar screws with those clearers. Is there some way to do this thing without putting clearers in my div.items? Anyway, I've reduced what I need down to a little diagram with just 6 block-level elements. Here's a link to the diagram image, including the requirements for each: http://www.rit.edu/upub/new/whatineed.gif So, to any kind soul that could help. Is the layout pictured in my diagram even possible to do with CSS and get it working on the major browsers? I just can't seem to get it to work right. The second div.item keeps displaying vertically below where either the sitenav of the sidebar ends. Again, thanks in advance for any more advice. -o- Jared Lyon RIT University Publications ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
