Jared Lyon wrote: > 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, instead of it just being 400px like it is now? >
It's actually 500px, because you have a rule for it that says "width: 500px;" :-) 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. > And as always, any other comments on the site are welcome as well. > I think it's a great design and will be a lovely example of liquid layout. Shoot me an email when it's launched so I can bookmark it, ok? :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ 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/
