ASP.NET 1.1 and CSS Questions

Hello. I'm working on the layout of an older site built in ASP.NET 1.1 and it also uses some CSS. I'm having issues getting things lined up using the CSS. I have 3 containers, one called 'top', one called 'report', one called 'selection'. I basically want to not only center align everything, but have things expand and contract with the browser.

The 'top' container works fine now, as it's just an image and is always in the top of the browser and is always 40px in height.

The 'report' container just has a datagrid in it which is the most important part that I want to expand and contract with the browser window size. This needs to obviously start right after the 'top' and go to the next container.

The 'selection' container have some controls and whatnot in it, is always 247px in height and should always be positioned at the bottom of the browser window.

So the 'report' one needs to fill up the space in between 'selection' and 'top' while 'top' and 'selection' must always show, no matter window size (meaning if 'report' must shrink down so much it's unreadable with a tiny browser size, then oh well).

Can anyone help me with this? I'm not a great CSS person. This is the code I have thus far (and yes it's horrible):

#top {
background-repeat:no-repeat;
height:40px;
width:100%;
background-color:#2946D4
}

#report {
  position: relative;
  top: -20px;
  left: 0px;
  height:65%;
  width:100%;
  border-top:3px solid #023C8A;
  padding:3px;
  overflow: auto
}

#selection {
  position: relative;
  top: -20px;
  height:247px;
  width:100%;
  background-color:#000066
}

Code (markup):

If this isn't the right section to post this question, please let me know where it should go. Thanks for all your help.

 

What are these containers? Divs? Table cells?

If they're Divs and you generate them, then I'd recommend changing to a table - people are in love with divs but for what you're trying to do you'll have to sacrifice a lot of CSS functionality just to keep things looking similar in different browsers.

Whatever they may be, you have a few options for centering things (depending what exactly you want to center, and if you put them in a shell div - which i'd recommend)

font-align: center;

margin-left: auto;
margin-right: auto;


I found a page that does -kinda- what you want.. i dont think my account can post hyperlinks cause i just made it.. but perhaps u could check this page out and see if its the type of thing you want

sean-obrien.net
using:
sean-obrien.net/styles/main.css

Regarding sizing things for a user - In my experience you can find yourself on a holy crusade trying to get everything to work out perfectly, but staying realistic can make your life easier. How often will your client need to access your web app in a 40px x 40px window? Probably never, and it might not matter what it looks like in that scenario. Likewise, no one needs your webapp to display at 3200px - How easily could you just make something tailored for 1024 (~970px) and have some ultra easy CSS. As of January 2007 only 14% of people were still using 800x600. Might save you time, if its a realistic option for you..

Cheers, I hope taking a look at that site I found helps you achieve the design you want

 

Yes, I meant divs, but it's of no matter anymore. I finally had a friend figure something out for me, using some tables (like what you mentioned by replacing some divs with tables) and then some javascript as well. Works perfectly as I wanted now. Thanks for your suggestions though.