CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mala
mala

Reputation: 19

Resize div width based on browsers

I am new to jquery. Below is my html structure, where the content and grid have css with a width of 100%. This works perfectly in IE8 whereas in firefox and google chrome the div width spans and has to scroll toward the right.

<div id="content">
     <div id="grid">
          <table id="test">
          </table>
     </div>
</div>

However i am using the below jquery function to dynamically resize div width based on browser for ff and chrome.but it's not working. Can anyone help me?

$(window).resize(function () {
     var windowWidth = $(window).width();
     $('content').css({'width':windowWidth });
});
.resize();

css post:

#content{
     padding-right: 0px; 
     padding-left: 0px; 
     padding-bottom: 0px; 
     margin: 3px 28px 2px 14px; 
     width: 100%; 
     padding-top: 0px;
     height: 70%;
}
#grid {
    width: 100%;
    /* following rules for illustration */
    background-color: blue;
    min-height: 100px;
    padding-right: 0px; 
    padding-left: 0px;  
    padding-bottom: 0px;
    margin: 0px 0px 10px; 
    padding-top: 0px; 
}

Upvotes: 0

Views: 2590

Answers (1)

Marcel Burkhard
Marcel Burkhard

Reputation: 3523

For what you're doing you shouldn't use javascript, you could just use width: 100%; or even better width: auto;.

That being said if you want to dynamically set a width in pixels using jquery you need to add the suffix px.

Which means:

$('content').css({'width':windowWidth+'px' });

I just don't think this is going to solve your initial problem where you get scroll bars when using width:100% or width:auto;

I think you need to do the following:

Remove the padding and margin for html and body using CSS as follows:

html, body {
    margin:0;
    padding:0;
}

or jquery

$("body").css("margin","0")
         .css("padding","0");
$("html").css("margin","0")
         .css("padding","0");

Update

Now that you posted your CSS just change it to the following:

#content{
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 3px 28px 2px 14px; 
    WIDTH: auto;  /* changed this line */
    PADDING-TOP: 0px; HEIGHT: 70%;
}
#grid {
    width: auto; /* and changed this line aswell */
    background-color: blue;
    min-height: 100px;
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px;  
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 0px 10px; 
    PADDING-TOP: 0px; 
}

Upvotes: 2

Related Questions