div fit into cornor

by netnet

HTML

<div id="bottomForm" class="testGroupPosition">
 <div id="test">

<!-- 7th line-->
                <div id="Biochemistry" class="Biochemistry">
                   <ul>
                        <li class="multiple">
                            <div class="labelwrapper">
                                <input type="checkbox" id="potassium" size="4em" class ="test-left-float">
                                <label class ="test-left-float"> Checkbox 1</label>
                            </div>
                        </li>
                    </ul>
                </div id="Biochemistry">
                
                <div id="Hematology" class="Hematology">
                    <ul>
                        <li class="multiple">
                            <div class="labelwrapper">
                                <input type="checkbox" id="prenatal" size="4em" class ="test-left-float">
                                <label class ="test-left-float"> Prenatal: ABO, RhD, Antibody Screen <br> (titre and ident. if positive)  </label>
                            </div>
                        </li>
                    </ul>
                </div id="Hematology">
                   
                <div id="Hepatitis" class="Hepatitis">
                    <ul>
                        <li class="multiple">
                            <div class="labelwrapper">
                                <label class ="test-left-float"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                                     111111111111111111111111
                                </label>
                            </div>
                        </li>
                    </ul>
                </div id="Hepatitis">    
                
                <!-- 8th line-->
                <div id="Biochemistry" class="Biochemistry">
                   <ul>
                        <li class="multiple">
                            <div class="labelwrapper">
   ...

CSS

<style TYPE="text/css">
 /** Common: for all groups */
INPUT[type='text'], TEXTAREA {                 /** if put "#physicianGroup  TEXTAREA" selector, :hover doesn't work!! coz current one will be more specific */
   background-color:#DDE4FF;
}

INPUT:hover, textarea:hover {background: yellow !important;}
INPUT:focus,textarea:focus {background: #99FF99 !important;}
/* INPUT:focus:hover, textarea:focus:hover {background: #99FF99;} */

input[type="checkbox"] {
 -moz-appearance: none;
 background-color: red;
 color: #DDE4FF;
}

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
   background-color:#E6E7E8 !important;
}

/**  TODO: label tag include the input tag, need put border seperately. */
#patient label {
border: 1px solid black;
}

table {
border:none;
}

.grap-whole-row {
 display:block;
 width:100%;
}

ul  {
list-style-type: none;
padding: 0;
margin-top: 0;
margin-left: 0;
/* font-weight: bold; */
}

.noborder {
 border: none !important;
}

.inline-block { display:inline-block;width:100%; }

 /** Group 1: for physician group */
.physicianGroupPosition  {
       vertical-align:baseline;
}


table INPUT[type='text'], #physicianGroup TEXTAREA                                      /** TODO: need refactor the textarea ccs */
{   
    background-color:#DDE4FF;
   text-align:justify;
   display: inline-block;
   width: 100%;
   height: 100%;
   margin: 0;
   padding; 0;
}

/** Group 2: for patient group */
.patientGroupPosition {
       float: left;
       margin-right: 0;
       vertical-align:baseline;
       width: 60%;
}

span INPUT[type='text'], TEXTAREA
{   
   background-color:#DDE4FF;
       text-align:justify;
       display: inline-block;
   margin: 0;
   padding; 0;
}

.labUse-span {
   display: inline-block;
   height: 10.5em;
   width: 100%;
}

.fitin-text  {
   background-color:#DDE4FF;
   text-align:justify;
   display: inline-block;
   width: 100%;
   height: 100%;
   margin: 0;
   padding; 0;
}

#patient {
       width: 100%;
       height:...