Position a block element in the bottom-right of a fieldset - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

Position a block element in the bottom-right of a fieldset

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body<!--   w w w.jav  a2  s .c o  m-->
 {
   color:Chartreuse;
   font-size:.86em;
   font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
   vertical-align:baseline;
}

#container {
   width:100%;
   padding:0;
}

#centerstripe {
   width:961px;
   height:100%;
   margin:auto;
   background-color:yellow;
}

#header {
   width:961px;
   height:181px;
   margin:auto;
}

#headerlogo {
   width:151px;
   margin:auto;
   float:left;
}

#headermenu {
   width:auto;
   height:171px;
   display:table-cell;
   vertical-align:bottom;
}

#content {
   width:961px;
   min-height:501px;
   margin:auto;
}

#leftmenu {
   width:151px;
   float:left;
   padding-left:8px;
   padding-top:6px;
   min-height:499px;
}

#maincontent {
   width:auto;
   min-height:501px;
}

#footer {
   clear:both;
   font-size:.9em;
   width:961px;
   text-align:right;
   margin:auto;
   height:501px;
}

.inlinemenu {
   float:left;
   margin-left:11px;
}

fieldset {
   min-height:501px;
}

fieldset legend {
   font-weight:bold;
}

ul {
   padding-left:0;
}

.lower-Right-Button {
   position:absolute;
   bottom:0;
   right:0;
   min-width:100px;
}
</style> 
 </head> 
 <body> 
  <fieldset style="position: relative"> 
   <legend>Lorem ipsum dolor sit a</legend> 
   <table> 
    <tbody> 
     <tr> 
      <td>Lorem ipsum dolor sit amet, consectetur adipisci</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie l</td> 
     </tr> 
    </tbody> 
   </table> 
   <input type="submit" value="Save" class="lower-Right-Button"> 
   <input type="submit" value="New" class="lower-Right-Button" style="right: 110px"> 
  </fieldset>  
 </body>
</html>

Related Tutorials