html - CSS and website layout -

is able me replicate layout of screen @ http://login.microsoftonline.com

what after 2 columns, span size of page, there no scroll bar or anything.

i want smaller of 2 columns on left, not right , want able choose image larger area in css or html.

there doesn't need wording, 2 columns, , larger 1 background image.

any assistance appreciated.

html

<div class="colmask leftmenu">     <div class="colleft">         <div class="col1">             <!-- column 1 start -->             <h2>right</h2>          </div>         <div class="col2">             <!-- column 2 start -->             <h2>left</h2>             <!-- column 2 end -->         </div>     </div> </div>  </body> </html> 

css

body {     margin:0;     padding:0;     border:0;           /* removes border around viewport in old versions of ie */     width:100%;     background:#fff;     min-width:600px;        /* minimum width of layout - remove line if not required */                     /* min-width property not work in old versions of internet explorer */     font-size:90%; } {     color:#369; } a:hover {     color:#fff;     background:#369;     text-decoration:none; } h1, h2, h3 {     margin:.8em 0 .2em 0;     padding:0; } p {     margin:.4em 0 .8em 0;     padding:0; }  /* 'widths' sub menu */ #layoutdims {     clear:both;     background:#eee;     border-top:4px solid #000;     margin:0;     padding:6px 15px !important;     text-align:right; } /* column container */ .colmask {     position:relative;  /* fixes ie7 overflow hidden bug */     clear:both;     float:left;     width:100%;         /* width of whole page */     overflow:hidden;        /* chops off overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft {     float:left;     width:100%;     position:relative; } .col1, .col2, .col3 {     float:left;     position:relative;     padding:0 0 1em 0;     overflow:hidden; } /* 2 column (left menu) settings */ .leftmenu {     background:#fff;        /* right column background colour */ } .leftmenu .colleft {     right:75%;          /* right column width */     background:#f4f4f4; /* left column background colour */ } .leftmenu .col1 {     width:71%;          /* right column content width */     left:102%;          /* 100% plus left column left padding */ } .leftmenu .col2 {     width:21%;          /* left column content width (column width minus left , right padding) */     left:6%;            /* (right column left , right padding) plus (left column left padding) */ } 

i managed 2 columns, can't figure out how make them single screen (full browser size) , image in background of 'right'

thanks.

body {      margin:0;      padding:0;      border:0;           /* removes border around viewport in old versions of ie */      width:100%;      background:#fff;      min-width:600px;        /* minimum width of layout - remove line if not required */                      /* min-width property not work in old versions of internet explorer */      font-size:90%;  }  {      color:#369;  }  a:hover {      color:#fff;      background:#369;      text-decoration:none;  }  h1, h2, h3 {      margin:.8em 0 .2em 0;      padding:0;  }  p {      margin:.4em 0 .8em 0;      padding:0;  }    /* 'widths' sub menu */  #layoutdims {      clear:both;      background:#eee;      border-top:4px solid #000;      margin:0;      padding:6px 15px !important;      text-align:right;  }  /* column container */  .colmask {      position:relative;  /* fixes ie7 overflow hidden bug */      clear:both;      float:left;      width:100%;         /* width of whole page */      overflow:hidden;        /* chops off overhanging divs */  }  /* common column settings */  .colright,  .colmid,  .colleft {      float:left;      width:100%;      position:relative;  }  .col1,  .col2,  .col3 {      float:left;      position:relative;      padding:0 0 1em 0;      overflow:hidden;  }  /* 2 column (left menu) settings */  .leftmenu {      background:#fff;        /* right column background colour */  }  .leftmenu .colleft {      right:75%;          /* right column width */      background:#f4f4f4; /* left column background colour */  }  .leftmenu .col1 {      width:71%;          /* right column content width */      left:102%;          /* 100% plus left column left padding */  }  .leftmenu .col2 {      width:21%;          /* left column content width (column width minus left , right padding) */      left:6%;            /* (right column left , right padding) plus (left column left padding) */  }  .col1 {    background-image: url("https://3.bp.blogspot.com/-w__wiahujwi/vt3grd8df0i/aaaaaaaaa78/7xqunj8ujty/s1600/image02.png");  }  h2 {    height: 800px;    }

<div class="colmask leftmenu">      <div class="colleft">          <div class="col1">              <!-- column 1 start -->              <h2>right</h2>            </div>          <div class="col2">              <!-- column 2 start -->              <h2>left</h2>              <!-- column 2 end -->          </div>      </div>  </div>    </body>  </html>