1 Reply Latest reply on Mar 15, 2010 7:38 AM by janken71

    div float right height:100% doesn't work on IE?

    Lampros_uk

      this is the code :

       

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>
          <link href="Wizard-Main.css" rel="Stylesheet" type="text/css" />
          <!--[if IE 8]>
      <link href="ie.css" type="text/css" rel="stylesheet" media="screen" />
      <![endif]-->
      <!--[if IE 7]>
      <link href="ie.css" type="text/css" rel="stylesheet" media="screen" />
      <![endif]-->
      </head>
      <body>
              <form id="form1" runat="server">
              <div id="header" class="wizard-header">
                  <!--  Caption / Actions / Steps -->
                  <div id="headerContainer" class="wizard-header-container">
                      <div id="captionContainer" class="wizard-caption-container">
                          <!-- Wizard Caption -->
                          <div id="caption" class="wizard-caption">
                              <span>Caption</span>                    </div>
                          <div id="stepCaption" class="wizard-step-caption">                    </div>
                      </div>
                      <div id="wizardActionsContainer" class="wizard-actions-container">
                          <!-- Actions -->
                          <div id="actions" class="wizard-actions-left">
                              action buttons                    </div>
                          <div id="wizardActions" class="wizard-actions-right">
                              more actions                    </div>
                      </div>
                      <div id="wizardSteps" class="wizard-steps">
                          <!-- Wizard Steps -->
                      </div>
                      <div id="stepActions" class="wizard-step-actions">
                          <!-- Steps Actions-->
                      </div>
                  </div>
                  <div id="wizardKeyInformation" class="wizard-key-information">
                      <!-- Wizard info goes here -->
                      wizard info            </div>
              </div>
              <div id="content" class="wizard-content">
                  <div id="stepContent" class="wizard-step-content">
                      <!-- Wizard Step Content -->
                  </div>
                  <div id="stepKeyInformation" class="wizard-step-key-information">
                      <!-- Wizard Step Key Information -->
                      <!-- Step Key Information -->
                      step info            </div>
              </div>
              <span style="clear:both;"></span>
              </form>
      </body>
      </html>

       

      css

       

      /* css */
      HTML, BODY

       

      {

       

      width:100%;

       

      height: 100%;

       

      padding: 0;

       

      margin: 0;

       

      }

       

      #form1

       

      {

       

      position:relative; /* needed for footer positioning*/

       

      margin:0 auto; /* center, not in IE5 */

       

      width:100%;

       

      height:100%; /* IE6: treaded as min-height*/

       

      min-height:100%; /* real browsers */

       

      }

       

      .wizard-header

       

      {

       

      background:blue;

       

      min-height:200px;

       

      max-height:200px;

       

      height:200px;

       

      }

       

      .wizard-header-container

       

      {

       

      background:green;

       

      float:left;

       

      width:75%;

       

      }

       

      .wizard-caption-container

       

      {

       

      background:red;

       

      min-height:60px;

       

      max-height:60px;

       

      height:60px;

       

      }

       

      .wizard-caption

       

      {

       

      background:yellow;

       

      float:left;

       

      margin-right:15px;

       

      height:100%;

       

      }

       

      .wizard-step-caption

       

      {

       

      background:grey;

       

      float:left;

       

      height:100%;

       

      }

       

      .wizard-actions-container

       

      {

       

      background:cyan;

       

      max-height:40px;

       

      min-height:40px;

       

      height:40px;

       

      width:100%;

       

      }

       

      .wizard-actions-left

       

      {

       

      float:left;

       

      background:white;

       

      height:100%;

       

      margin-right:10px;

       

      }

       

      .wizard-actions-right

       

      {

       

      float:left;

       

      height:100%;

       

      background:white;

       

      }

       

      .wizard-steps

       

      {

       

      background:lightblue;

       

      max-height:60px;

       

      min-height:60px;

       

      height:100%;

       

      }

       

      .wizard-step-actions

       

      {

       

      background:lightgreen;

       

      max-height:40px;

       

      min-height:40px;

       

      height:100%;

       

      }

       

      .wizard-key-information

       

      {

       

      background:magenta;

       

      float:right;

       

      width:25%;

       

      min-height:200px;

       

      max-height:200px;

       

      height:200px;

       

      }

       

      .wizard-content

       

      {

       

      position:fixed;

       

      bottom:0px;

       

      left:0px;

       

      right:0px;

       

      top:200px;

       

      width:100%;

       

      }

       

      .wizard-step-content

       

      {

       

      background:white;

       

      float:left;

       

      width:75%;

       

      height:100%;

       

      }

       

      .wizard-step-key-information

      {

      background:lightblue;

      float:right;

      width:25%;

      height:100%;

      }

       

       

      in bold what it doesnt work on IE