Need quite a bit of CSS help please

[HMBeaty]

Since I have an extreme lack of CSS knowledge, I need a little help on getting a couple of this straightened out correctly.

Basically what I did was rip the "table" code from the WGO box from the forumhome and edited it to about 50% of where I need it to be. The rest, I'm at a standstill (due to my lack of css knowledge). What I need to do, is put the "question" and "answer" in 2 columns, side-by-side, both aligned to the left with a 50% width and also, I need to change the space between "tables". I've also attached an image to show what I'm trying to do, along with the template and css code that I'm currently using.

Any help is greatly appreciated. The faster the help, the faster this will be released for vBulletin 4

[Lynne]

I can't tell where I'm supposed to look in all that text.... anyway, did you try float:right on the box?

[HMBeaty]

Originally Posted by Lynne

I can't tell where I'm supposed to look in all that text.... anyway, did you try float:right on the box?

Well, that wouldn't quite do what I need done. I need to have the form have 2 columns. The "questions" on one side aligned to the left in a 50% width column, and the "answers" on the other side aligned to the left in a 50% width column. Similar to what's seen in the screenshot here

[pein87]

there in a table? Why not assign a width for each table data with the first one being set to 100% and the other having a fixed width. Another solution is to make one on table data and an inner div to hold your radio buttons and use margin:left to space it to the other end. Of do an all div mark up which would enable various other styling abilities over a table.

You could use another table just for that one part like so

<table>
<tr>
<td class="questions"> hhgfhfhfghfhfghfhf</td><td class="answers"><form><input type ="radio" /><label>Whats UP?</label><br /><input type ="radio" /><label>Whats UP?</label><br /><input type ="radio" /><label>Whats UP?</label><br /></form></td>
</tr>
</table>

CSS:

table {	
width:100%;
height:auto;
}
td {
	padding:10px 10px 10px 10px;
	height:auto;
}
td.questions {
	width:50%;
	height:auto;
}
td.answers {
	width:50%;
	text-align:right;
}

Hope that helps you some.

[HMBeaty]

Originally Posted by pein87

there in a table? Why not assign a width for each table data with the first one being set to 100% and the other having a fixed width. Another solution is to make one on table data and an inner div to hold your radio buttons and use margin:left to space it to the other end. Of do an all div mark up which would enable various other styling abilities over a table.

You could use another table just for that one part like so

<table>
<tr>
<td class="questions"> hhgfhfhfghfhfghfhf</td><td class="answers"><form><input type ="radio" /><label>Whats UP?</label><br /><input type ="radio" /><label>Whats UP?</label><br /><input type ="radio" /><label>Whats UP?</label><br /></form></td>
</tr>
</table>

CSS:

table {	
width:100%;
height:auto;
}
td {
	padding:10px 10px 10px 10px;
	height:auto;
}
td.questions {
	width:50%;
	height:auto;
}
td.answers {
	width:50%;
	text-align:right;
}

Hope that helps you some.

No, there's no tables. I know how to do what you posted, but I'm trying to avoid tables and stick with vBulletin's new css layout

[HMBeaty]

Well, I just tried adding a little more css...

#staffapp div.staffappcol {
	width: 50%;
	float: {vb:stylevar left};
}

and changed...

			<div id="staffapp_options">
				<h3>{vb:rawphrase staffapp_position}</h3>
<vb:if condition="$vboptions['postitionapplying_mod_onoff']">
		<input type="radio" name="position_applying" value="Moderator" />{vb:rawphrase staffapp_mod}<br />
</vb:if>
<vb:if condition="$vboptions['postitionapplying_smod_onoff']">
		<input type="radio" name="position_applying" value="Super Moderator" />{vb:rawphrase staffapp_smod}<br />
</vb:if>
<vb:if condition="$vboptions['postitionapplying_admin_onoff']">
		<input type="radio" name="position_applying" value="Administrator" />{vb:rawphrase staffapp_admin}
</vb:if>
			</div>

to

			<div id="staffapp_options">
		<div class="staffappcol">
				<h3>{vb:rawphrase staffapp_position}</h3>
		</div>
		<div class="staffappcol">
<vb:if condition="$vboptions['postitionapplying_mod_onoff']">
		<input type="radio" name="position_applying" value="Moderator" />{vb:rawphrase staffapp_mod}<br />
</vb:if>
<vb:if condition="$vboptions['postitionapplying_smod_onoff']">
		<input type="radio" name="position_applying" value="Super Moderator" />{vb:rawphrase staffapp_smod}<br />
</vb:if>
<vb:if condition="$vboptions['postitionapplying_admin_onoff']">
		<input type="radio" name="position_applying" value="Administrator" />{vb:rawphrase staffapp_admin}
</vb:if>
		</div>
			</div>

and it worked, but it broke it at the same time (see attachment). what am I doing wrong?

[pein87]

try this should work used inner div for spacing floats and a 1px clear:both div to clear the floats. color addded so you can test it as a regular html page first. You can use one float since everything will wrap around the floated object until cleared but your signs would look messy. you could also use two divs on main div set to position:relative; and the inner div set to position: absolute; and set right:5px; to set it spaced 5 pixels from the right and it should keep 50% of the parent divs width. I haven't tested it but its possible if this version doe not work.

HTML:

<div class="container">
	<div class="q">
		<div class="spacer">dasda</div>
	</div>
	
	<div class="a">
		<div class="spacer">dasda</div>
	</div>
	<div class="endFloat"></div>
</div>

CSS:

div.container {
	height:auto;
	width:100%;
}
div.q {
	width:50%;
	float:left;
	background-color:fuchsia;
}
div.a {
	width:50%;
	float:right;
	text-align:right;
	background-color:aqua;
}
div.spacer {
	padding:5px;
}
div.endFloat {
	width:100%;
	height:1px;
	clear:both;
}