Resize the div width with window size

Get Started
21

No problem :lol:

22

at present i am using css for my div1 as

position:fixed;
top:100px; /* or whatever the header height is */
right:0;
bottom:0;
left:0;
overflow:auto;

and also set

  • { border: 0; margin: 0; padding: 0;}
    on the first line of the external css

at present its working fine

thanks to all of your contribution all this post were really helpful in solving the things

few more things to look it more elegeant

at present div1 occupies the rest of the space ie viewport .
is it possible that some spacing is left and right
i tried but its not wrking due to the css given on the first line of stylesheet

second is i am using the below css for grid
.data
{ font-size: small;
color: #000000;
border-right: lightgrey 1px solid;
border-bottom: lightgrey 1px solid;
vertical-align: middle;
text-align:center;

}

in IE everything is displayed properly
but in FF the border for grid is not displayed and the gridrows appear smaller
and even the font problm
how do i make it look it same in all browser

23

If you want to add some internal padding, so space between the inside of the div and the content, set

padding: 10px;

this will apply 10px padding to top, left, bottom and right side.

If you want to push div1 away from what it’s next to, either change
top, left, bottom and right to the appropriate values,

or

use margin
eg

margin: 0 auto

This will set top and bottom margin to 0 and left and right will automatically change to center the div within it’s parent.

Re: the border problem in FF, try setting it as:


border-right: 1px #EFEFEF solid
border-bottom: 1px #EFEFEF solid

Don’t quote me but I think you have to declare the size before the colour.
#EFEFEF is a nice light grey by the way.

Hope this helps.

24

i tried setting the border of grid as per the post but no change, in IE its perfect

frm the above posting i have set the grid in the div to fill the space of screen and also set the elements above the div
prblm which i have noticed is

in IE when the window is resized, mimimized the top elements appear as it is in perefct place/position
but in FF when window is minimized the top elements appear to go below the div
as the width is decreased height seems to increase
but appears normal when the window is maxmized