Controlling layout for specific elements - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

Controlling layout for specific elements

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit a</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
fieldset.fsGroup {
   display:inline;
   float:left;
   width:49%;
   border-color:Chartreuse;
   border-style:solid;
   border-width:2px;
   padding:6px;
}

.container * {<!--from   w  w w .  j  ava 2 s .com-->
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

.container>fieldset.fsGroup:first-child {
   height:21em;
}

.container>fieldset.fsGroup:nth-child(2) {
   height:6em;
}

.container>fieldset.fsGroup:nth-child(3) {
   height:11em;
}

.container>fieldset.fsGroup:nth-child(4) {
   height:6em;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <fieldset class="fsGroup"> 
    <legend>Lorem ipsu</legend> 
    <label for="fieldL1">Lorem i</label> 
    <input type="text" id="fieldL1"> 
    <br> 
    <label for="fieldL2">Lorem i</label> 
    <input type="text" id="fieldL2"> 
    <br> 
    <label for="fieldL3">Lorem i</label> 
    <input type="text" id="fieldL3"> 
   </fieldset> 
   <fieldset class="fsGroup"> 
    <legend>Lorem ipsum d</legend> 
    <label for="fieldR1">Lorem i</label> 
    <input type="text" id="fieldR1"> 
    <br> 
   </fieldset> 
   <fieldset class="fsGroup"> 
    <legend>Lorem ipsum d</legend> 
    <label for="fieldR2">Lorem i</label> 
    <input type="text" id="fieldR2"> 
    <br> 
   </fieldset> 
   <fieldset class="fsGroup"> 
    <legend>Lorem ipsum d</legend> 
    <label for="fieldR3">Lorem i</label> 
    <input type="text" id="fieldR3"> 
    <br> 
   </fieldset> 
  </div>  
 </body>
</html>

Related Tutorials