CSS Issue

[adam84]

Ok, I am trying get out of the habit of tables and using div tags. But I haven't had a whole lot of luck.

 

The page I am working on is a register page.

 

I have my main div tag called 'mainContent' where all my site information gets loaded into.

Inside that div, I have another div tag called 'subContainer', which I refer it to be like a <tr>

Inside that div, I have two more div tags, 'fieldTitle', which formats the field title ('user name', 'password', 'email', etc)

The next tag is 'fieldElement', which just holds the textfield, select, etc.

 

What I want to do is have the fieldTitle div span 50% of the row( 'subContainer' ), then have the 'fieldElement' span the remaining 50%.

But for some reason, it is not doing that.

 

 

HTML

<div class="mainContent">
<div class="subContainer">
	<div class="fieldTitle">
		User Name:
	</div>

	<div class="fieldElement">
		<input class="textField_Effects" type="textfield" name="userName" id="userName" maxlength="25" size="25">
	</div>
</div>
</div>

 

CSS

.mainContent{
border: 1px solid #000000;	
margin-left: 15%;
width: 100%;
height: 100%;
}

.fieldTitle{
width: 50%;
border: 1px solid #000000;	
font-weight: bold;
font-size: 12px;
text-align: right;
display: inline;
}

.subContainer{
width: 100%;
margin: 0; 
border: 1px solid #000000;
}

.fieldElement{
border: 1px solid #000000;	
width: 50%;
text-align: left;
}

[dropfaith]

text-align only controls the text inside the div use float:left on the left div and float:right on the other div

 

 

oh and seeing is ie displays widths screwed some times  i generally dont use 50 on each id use like 48 to give ie some room to play with on displaying

[bronzemonkey]

you should also be using form elements to structure a form. see w3c schools or the html 4.01 spec form more details