its wrking fine so far but the only concern is by using the above the div gets placed at the top and the controls/buttons/elements above this div gets hidden
there are few controls/emenets above this div in a <table>
You can’t combine float and absolute positioning (fixed positioning is a subtype of absolute positioning). The float:left declaration will be ignored, so you should leave it out. Setting height:100% is pointless when you have top:0 and bottom:0, and the same goes for width:100% vs left:0 and right:0. The percentage height requires that you have an explicit height declared for the containing block, too, so I’d recommend leaving out the height and width declarations.
Now I’m confused. You said you wanted a div that would cover the entire viewport, but now you’re saying there should be stuff above it?
i dont want the gridview to scroll hence used div for fixing it to screen width, height
by above lines i do get wht i need ie the gridview in the div fixed to the screen width height and with div scroll bar for scrolling data
but by using the above the elements at the top of mydiv goes behiind my div and hence not visible
i want the elemets to be visible as they are
and below it mygrid with the present effect
Let’s see if I understand what you want (it would help a lot if you could write in complete sentences, using punctuation, and beginning sentences with a captial letter; why make it harder than necessary for those who are trying to help you?).
At the top of the page you have some sort of header with controls. Below that you want an element that fills the rest of the viewport and has a scrollbar if its content is taller than the container.
If so, this should work if your header has a known height:
top:3em; /* or whatever the header height is */
used the above css it works fine
but again there is browser prblm
the top content is having a height of 5em;
by using the above in IE the spacing between the top matter and the below div is proper
but in FF the spacing is more and disturbaance in page layout
i need to take care of all the things of the page
If you don’t have an external Stylesheet, I strongly suggest you Google it to find out more and then implement it as you are essentially shooting yourself in the foot by using inline styles. It makes your HTML weighty and hard to decipher, and also when you come to update your site and you want to change the colour of say the paragraph tag, you wont have to go through and find everywhere it’s defined and used (easily 100+ in a fairly small site).
Instead, you go to your CSS file and change the one declaration of p and it will change the style of every paragraph targeted.
It makes it a hell of alot easier for people to help you too, as we wont have to wade through tones of redundant gumpf when the same could be declared once in an external CSS file and then referenced when you need it.
So add this to the very top of your external css file (line 1, this is very important!)
This will globally reset the border, margin and padding attributes of all elements to 0.
This will help with cross-browser compatibility as all browsers use their own defaults. This resets that and starts them all off on an even playing field.
You’ll have to explicitly specify every margin and padding you do want, even if the browser defaults would be perfectly all right. That means code bloat. Also, some browsers won’t allow you to change the padding twice for certain form controls, which can make, e.g., select lists unusable.
Perhaps if your design is one of those pixel-perfect I’m-really-a-print-designer types. (J/K)
Seriously, in many designs you don’t need exact control over every single padding and margin. Then it seems unnecessary to first reset everything and then have to add them back again. Isn’t it better to just be explicit about the ones you really need to change?
You reset everything to make it all 0 and have a fresh start. Most people either use the universal reset or Eric Meyers reset. You don’t always declare margins and paddings on every element. If you don’t it could add margins or paddings by browser default that makes it exceed your “px perfect design” and make it overflow the 100% width, and if using floats it will drop down to the next line. Not exactly preferable eh?