Click here to Skip to main content
15,749,072 members
Please Sign up or sign in to vote.
4.50/5 (2 votes)
See more:
<!DOCTYPE html>
<html xmlns="">
 <link href="" rel="stylesheet" type="text/css"/>
<script src=""></script>
<script src=""></script>
 <style type="text/css">
            padding-top : 50px;
            padding-bottom : 50px;
            padding-left : 50px;
            padding-right : 50px;
            border-color : Red;
            width : 50% !important;
            padding-top : 50px;
            padding-bottom : 50px;
            padding-left : 50px;
            padding-right : 50px;
<script type="text/javascript">
    $(document).ready(function () {
<fieldset id="fdemo">
<div id="resizable" style="width: 100px; height: 100px;" class='box'></div>

Attached above is the html code with a fieldset and a resizable div within the fieldset.

My user can resize the div to any width he wishes. In my real application I have other elements that resize. So this is just a relating demo.
In case my user resizes a control (in this case the div within the fieldset) to a width greater than the width of the fieldset, the width of the fieldset should increase so that the div is contained within the bounds of the fieldset.

When you execute the above code and put IE8 or IE9 in quirks mode, you will notice that the desired behaviour is achieved, the fieldset's width increases and the div is contained within the fieldset.

However when the document goes into standard mode(i.e. IE8 standard mode or IE9 standard mode), resizing of the div does not resize the fieldset. The fieldset stays as it is and the div moves over and out of the fieldset.

I am unable to understand why this is occuring and am not aware of availablity or unavailability of any property that could cause this issue to occur.

I need a solution that would allow the above to work on IE7, IE8 and IE9.

Any help would be appreciated.

Thanks in Advance.
Updated 10-May-12 2:40am
Sergey Alexandrovich Kryukov 10-May-12 16:11pm    
It it intended that when an inner content width gets smaller then some value, outer (red) border stops re-sizing, but its width can grow (in contrast to height which always follow the inner element width)? If so, it all works good (I use Mozilla Seamonkey). And IE sucks. That's a pity.
Sergey Alexandrovich Kryukov 10-May-12 16:12pm    
I voted 5 for the question. Good code, reasonable question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900