html - Two column grid without using row class -


i generating html pages @ run time of freemarker. poses limitation on html generation part.
show input fields in 2 grid column, need define each row , place fields in it.
current html

<body class="container">     <div class="section-outline">         <div class="row-fluid show-grid">         <div class="span6 form-inline"><label class="poclabel">first name:</label><input type="text" required/></div>         <div class="span6 form-inline"><label class="poclabel">middle initial:</label><input type="text" /></div>         </div>         <div class="row-fluid show-grid">         <div class="span6 form-inline"><label class="poclabel">last name:</label><input type="text" required/></div>         <div class="span6 form-inline"><label class="poclabel">social security number:</label><input type="text"/></div>         </div> 

can same result without putting span6 divs in row? want same result like:

<div class="span6 form-inline"><label class="poclabel">first name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">middle initial:</label><input type="text" /></div> <div class="span6 form-inline"><label class="poclabel">last name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">social security number:</label><input type="text"/></div> 

here

.show-grid [class*="span"] {     text-align: left;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px;     min-height: 40px;     line-height: 40px;     margin-top: 10px;     display: inline; } label.poclabel {     width: 200px;     vertical-align: middle; } .section-outline {     position: relative;     margin: 15px 0;     padding: 39px 19px 14px;     background-color: #fff;     border: 1px solid #ddd;     -webkit-border-radius: 4px;     -moz-border-radius: 4px;     border-radius: 4px;  } 

is looking : http://jsfiddle.net/wa2yq/

.span6.form-inline {     display:inline-block;     width:49%; } .span6.form-inline label {     width:200px;     display:inline-block; } 

or http://jsfiddle.net/wa2yq/1/

.span6.form-inline {     float:left;     width:50%; } .span6.form-inline label {     width:200px;     display:inline-block; } 

or else ?


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -