multi row/col css layout

i would like to make the following table into a CSS layout

basically a 2 column layout with headers in between each section +

it MUST be responsive as well .... i.e. to be used on mobile devices/ and be single column on a mobile device

<table border="1" cellpadding="5" cellspacing="5" width="90%">
<tr>
	<th colspan="2">Demographic info</th>
</tr>
<tr>
	<td width="50%" valign="top"> <!-- left col -->
	<table border="0" cellpadding="5" cellspacing="5" width="90%">
	<tr>
		<td colspan="2">Personal Info</td>
	</tr>
	<tr>
		<td>First Name</td>
		<td><input type="Text" size="20" name="f_name"></td>
	</tr>
	<tr>
		<td>Last name</td>
		<td><input type="Text" size="20" name="l_name"></td>
	</tr>
	</table>
	</td>
	<td width="50%" valign="top"> <!-- right col -->
	<table border="0" cellpadding="5" cellspacing="5" width="90%">
	<tr>
		<td colspan="2">Address</td>
	</tr>
	<tr>
		<td>Addr 1</td>
		<td><input type="Text" size="20" name="addr1"></td>
	</tr>
	<tr>
		<td>Addr 2</td>
		<td><input type="Text" size="20" name="addr2"></td>
	</tr>
	</table>
</td>
</tr>
<tr>
	<th colspan="2">Affliation</th>
</tr>
<tr>
	<td width="50%" valign="top"> <!-- left col -->
	<table border="0" cellpadding="5" cellspacing="5" width="90%">
	<tr>
		<td>Type of entity</td>
		<td>
		<select name="type">
		<option>Some type 1</option>
		<option>Some type 2</option>
		<option>Some type 3</option>
		</select>
		</td>
	</tr>
	</table>
	</td>
	<td width="50%" valign="top"> <!-- right col -->
	<table border="0" cellpadding="5" cellspacing="5" width="90%">
	<tr>
		<td valign="top">Check all that apply</td>
		<td>
		<input type="Checkbox" name="test" value="1"> One&nbsp;
		<input type="Checkbox" name="test" value="2"> Two&nbsp;
		<input type="Checkbox" name="test" value="3"> Three&nbsp;
		<input type="Checkbox" name="test" value="4"> Four&nbsp;
		</td>
	</tr>
	</table>
	</td>
</tr>
<tr>
	<th colspan="2">Other</th>
</tr>
</table>

Open in new window

LVL 3
Timothy GoldenWeb DevAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would suggest using bootstrap http://getbootstrap.com/.  There is a grid system built in as well as it is meant to be responsive.   You can see how the grid works http://getbootstrap.com/css/#grid just by adding css.

The code to make a responsive 2 column grid would look something like below where the right column would convert to being stacked below the left on a phone.
<div class="row"><!-- row 1 -->
    <div class="col-md-6 col-xs-12">Full screen left, tinyscreen top</div>
     <div class="col-md-6 col-xs-12">Full screen right, tinyscreen bottom</div>
</div>
<div class="row"><!-- row 2 -->
    <div class="col-md-6 col-xs-12">Full screen left, tinyscreen top</div>
     <div class="col-md-6 col-xs-12">Full screen right, tinyscreen bottom</div>
</div>
<div class="row"><!-- row 3 -->
    <div class="col-md-6 col-xs-12">Full screen left, tinyscreen top</div>
     <div class="col-md-6 col-xs-12">Full screen right, tinyscreen bottom</div>
</div>

Open in new window

0
Timothy GoldenWeb DevAuthor Commented:
well i tried the bootstrap to make 4 columns but it doesnt fit even though my screen is set to 900PX
sample:
	<div class="row-fluid">
			<div class="col-sm-4">Grade</div>
			<div class="col-sm-4"># of Males</div>
			<div class="col-sm-4"># of Females</div>
			<div class="col-sm-4">Grade Total</div>
			</div>

Open in new window

i also tried:
	<div class="row">
			<div class="span4">Grade</div>
			<div class="span4"># of Males</div>
			<div class="span4"># of Females</div>
			<div class="span4">Grade Total</div>
			</div>
	<div class="row">
			<div class="col-sm-4">PreK</div>
			<div class="col-sm-4"><input type="number" id="info3" value="0" /></div>
			<div class="col-sm-4"><input type="number" id="info3" value="0" /></div>
			<div class="col-sm-4"><input type="number" id="info3" value="0" /></div>
			</div>

Open in new window


given bootstrap is 12 cols i thought that by using the "4" class i would get 4 even columns?

but that is not the case? i get 3 cols and the 4th wraps

like so:
http://imgur.com/Ki6CjaY
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please post a link to your test url or recreate it in jsbin.com.

Your code above is mixing css from bootstrap2 (span4) and bootstrap3 (col-sm-4)

If you want 4 columns, you would use "3" not "4".  Using "4" will give you 3 columns. Everything has to add up to 12.  3+3+3+3=12  4+4+4=12.

Notice in my sample I am using 2 columns for large screen and it will convert to 1 column for small screen by using "col-md-6 col-xs-12".  The 6 creates 2 columns for screen size 992 and up (md) and smaller screens the columns will stack using "12"
0
Timothy GoldenWeb DevAuthor Commented:
yes he code above was mixed just for reference to show that i tried both ways

so for a 4 columns i would use col-md-3
<div class="row">
			<div class="col-md-3">PreK</div>
			<div class="col-md-3"><input type="number" id="info3" value="0" /></div>
			<div class="col-md-3"><input type="number" id="info3" value="0" /></div>
			<div class="col-md-3"><input type="number" id="info3" value="0" /></div>
			</div>

Open in new window


i also presume i can 'stack' the classes like you did to make it responsive

<div class="row">
			<div class="col-md-3 col-sm-12">PreK</div>
			<div class="col-md-3 col-sm-12"><input type="number" id="info3" value="0" /></div>
			<div class="col-md-3 col-sm-12"><input type="number" id="info3" value="0" /></div>
			<div class="col-md-3  col-sm-12"><input type="number" id="info3" value="0" /></div>
			</div>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes you can.  Using your 2nd example you can see it works as you narrow your screen. http://jsbin.com/UcacELO/1/

You will just have to play with using md, sm, xs to see where you want it to stack vs columns.

Good luck on your project!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.