CSS DIV Layout, one column's width depends on the other's, making the total width adaptive (CSS DIV Layout, one column's width depend on the other's)_html/css_WEB-ITnose

A customer said that they want to use DIV CSS layout with two columns. The width of the navigation column is uncertain (determined by the TreeView control inside), and the width of the content column parallel to it must be adaptive. That is,

Content column width navigation column width == fixed value (total width)

However, content column width and navigation column width are both There is no fixed value, and most of the adaptive column width codes on the Internet are based on a fixed value

Helpless, I am a Winform person who knows very little about CSS DIV, so I can only pass JavaScript is used to complete it, and the effect is OK. IE7.0 and Firefox2.0 tests pass

In the code below, the width of the navigation column is not defined, and its actual width depends on the content inside. Confirmed:

Rendering, with the navigation bar on the right (not used to it, haha, the customer is Arabic):

< html >
< head >
     < title >
     < script  type ="text/javascript" >
          window.onload  =   function (){
           document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) " px " ;
      }
    
     < style  type ="text/css" >
        body
         {
            background :  #999 ;
            text-align :  center ;
            color :  #333 ;
            font-family :  Verdana, Arial, Helvetica, sans-serif ;
            margin :  0px ;
         }
        #header
         {
            margin-right :  auto ;
            margin-left :  auto ;
            padding :  0px ;
            width :  776px ;
            background :  #EEE ;
            height :  60px ;
            text-align :  left ;
         }
        #contain
         {
            margin-left :  auto ;
            margin-right :  auto ;
            width :  776px ;
         }
        #mainbg
         {
            float :  left ;
            padding :  0px ;
            width :  776px ;
            background :  #60A179 ;
         }
        #right
         {
            float :  right ;
            margin :  2px 0px 2px 0px ;
            padding :  0px ;
            background :  #ccd2de ;
            min-height : 300px ;
            _height : 300px ;
            text-align :  left ;
         }
        #left
         {
            float :  right ;
            margin :  2px 2px 0px 0px ;
            padding :  0px ;
            background :  #F2F3F7 ;
            width :  574px ;
            min-height : 600px ;
            _height : 600px ;
            text-align :  left ;
         }
        #footer
         {
            clear :  both ;
            margin-right :  auto ;
            margin-left :  auto ;
            padding :  0px ;
            width :  776px ;
            background :  #EEE ;
            height :  60px ;
         }
        .text
         {
            margin :  0px ;
            padding :  20px ;
         }
    

< body >
     < div  id ="header" >
        header with height of 60px
    
     < div  id ="contain" >
         < div  id ="mainbg" >
             < div  id ="right" >
                 < div  class ="text" >
                     < p >
                        put your tree here
                
            
             < div  id ="left" >
                 < div  class ="text" >
                the width of this div is dependent on the right div
                    left < br  />
                    left < br  />
                    left < br  />
                    left < br  />

                
            
        

                                                                    

In addition, the original code before modification is my collection. It seems that there are many copies online, and I don’t know where the original source is. Feel free to do it It has been expanded and modified, but it should still be noted. If you are the original author, please contact me blodfox777@hotmal.com