laying out html elements without using inline styles - html

Question

I'm coming from an iOS background and having trouble laying out elements in HTML and using CSS. I want to create something as "simple" as this:
I want to be able to split the screen in separate divs but have all the fieldsets align with each other. (They are fieldsets but I didn't draw them in my primitive mockup. I also didn't put anything in the third box but there's more stuff in there).
But here are some of my questions:
Box 1 questions:
I basically have style="display:block;" in all my elements. If I have an overarching div as style=display:block, I don't get the same effect. Is there a better way to do that?
Box 2 general question:
I ended up hardcoding all my styles to sort of achieve the image shown. It doesn't seem very usable or scalable. Any general principals I 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>

Answer 1

Your title says it all, don't use inline styles or it will quickly become a mess. Create an external stylesheet to hold all CSS, and style groups of elements targeted with CSS selectors.
Start by simplifying the structure. You have three columns, so three divs. It's a good idea to wrap them too:
<div id="wrapper">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
So you want them side-by-side. Floating them or using inline-block elements are two common techniques to achieve that. You tried to use both at the same time, choose one. I'll give an example for floating:
#wrapper { overflow: hidden; } /* clear the floats at the end,
so the wrapper extends down */
#col1, #col2, #col3 { float: left; }
#col1 { width: 25%; }
#col2 { width: 33%; }
You also don't need a div wrapping every field, and you don't have to manually make divs block (they are blocks by default, and fieldsets are too). Use labels and 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 all blocks:
label, input, select { display: block; }
I hope this gives you a general idea you can apply to the other columns.

Answer 2

This is exactly what CSS classes are for : http://www.w3schools.com/css/css_id_class.asp
For starters here are classes for your left and right sections:
.left {
display:inline-block;
vertical-align:top;
float:left;
width:25%;
}
.right {
display:inline-block;
vertical-align:top;
width:33%;
}
In use: http://jsfiddle.net/basarat/BM6Fp/#base
<div class="left">
<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 class="right">
<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>