As someone with an iOS background, I am struggling with arranging elements in HTML and using CSS. My goal is to create a layout as "simple" as the one pictured:
I want to split the screen into separate divs but have all the fieldsets align with each other. (The elements are fieldsets, although they are not depicted in my basic mockup. Also, I did not place anything in the third box, but there is more content there).
Here are some of my questions:
Regarding Box 1:
I have included style="display:block;" in all my elements. When I use an overarching div with style=display:block, I do not achieve the desired effect. Is there a better way to accomplish this?
General Question for Box 2: I had to hardcode all my styles to somewhat replicate the shown image. However, this approach does not feel very user-friendly or scalable. Are there any general principles I should adhere to?
<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>