css - laying out html elements without using inline styles -

i'm coming ios background , having trouble laying out elements in html , using css. want create "simple" this:

i want able split screen in separate divs have fieldsets align each other. (they fieldsets didn't draw them in primitive mockup. didn't put in third box there's more stuff in there).

but here of questions:

box 1 questions: have style="display:block;" in elements. if have overarching div style=display:block, don't same effect. there better way that?

box 2 general question: ended hardcoding styles sort of achieve image shown. doesn't seem usable or scalable. general principals should start with?

<div style="display:inline-block; vertical-align:top; float:left; width:25%">     <fieldset>         <legend>first fieldset</legend>         <div style="display:block;">field 1             <input type="text" style="display:block;" />         </div>         <div style="display:block;">field 2             <select style="display:block;">                 <option>field 2 options</option>             </select>         </div>         <div style="display:block;">field 3             <input type="text" style="display:block;" />         </div>     </fieldset> </div> <div style="display:inline-block; vertical-align:top; width:33%">     <fieldset>         <legend>second fieldset</legend>         <div style="clear:both"></div>         <div class="one-half" style="display:inline-block; float:left;">             <input type="radio" name="scoops" />single             <div style="display: block">radio 1</div>             <div style="display: inline">radio 2                 <input type="text" />             </div>             <div style="display: block">                 <input type="checkbox" />radio 3</div>         </div>         <div class="one-half" style="display:inline-block;">             <input type="radio" name="scoops" />double             <div style="display: block">blah 1</div>             <div style="display: inline">blah 2                 <input type="text" />             </div>             <div style="display: block">                 <input type="checkbox" />blah 3</div>         </div>     </fieldset> </div> 

your title says all, don't use inline styles or become mess. create external stylesheet hold css, , style groups of elements targeted css selectors.

start simplifying structure. have 3 columns, 3 divs. it's idea wrap them too:

<div id="wrapper">     <div id="col1"></div>     <div id="col2"></div>     <div id="col3"></div> </div> 

so want them side-by-side. floating them or using inline-block elements 2 common techniques achieve that. tried use both @ same time, choose one. i'll give example floating:

#wrapper { overflow: hidden; } /* clear floats @ end,                                    wrapper extends down  */ #col1, #col2, #col3 { float: left; } #col1 { width: 25%; } #col2 { width: 33%; } 

you don't need div wrapping every field, , don't have manually make divs block (they blocks default, , fieldsets too). use labels , make them blocks too:

<fieldset>     <legend>first fieldset</legend>     <label for="fld1">field 1</label>     <input id="fld1" type="text">      <label for="fld2">field 2</label>     <select id="fld2">         <option>field 2 options</option>     </select>      <label for="fld3">field 3</label>     <input id="fld3" type="text"> </fieldset> 

and make them blocks:

label, input, select { display: block; } 

i hope gives general idea can apply other columns.