align fieldsets with css

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • realin
    Contributor
    • Feb 2007
    • 254

    align fieldsets with css

    hi guys,

    i wanna set my fieldsets properly without using table.. like two fields in one row... here are my fieldsets..


    Code:
    			<fieldset>
    							<legend>Personal Information</legend>
    							<p><label>First Name</label><br/>
    							<input type='text'size='38' name='fname'/></p>
    							<p><label>Last Name</label><br/>
    							<input type='text'size='38' name='lname'/></p>
    							<p><label>Display Name</label><br/>
    							<input type='text'size='38' name='dname'/></p>
    							<p><label><input type='checkbox' name='chk'onClick='en_bday(this)'/>Fill Birthday</label><br/>
    							
    							Day<select name='bday' id='bday' disabled='disabled'>
    							<?php $i=1;
    							while($i!=32){
    							echo"<option>$i</option>";
    							$i++;
    							}?>
    							</select>
    							Month<select name='bmon' id='bmon' disabled='disabled'/>
    							<option>Jan</option><option>Feb</option><option>Mar</option>
    							Year<select name='byr' id='byr' disabled='disabled'/>
    							<?php $j=1900;
    							while($j!=2002){
    							echo"<option>$j</option>";
    							$j++;
    							}?></select>
    							</p>
    							<p><label>Few Lines About yourself<br />
    								<textarea cols='25' rows='5' name='yrself'></textarea></label></p>
    							
    					</fieldset>
    					
    						<fieldset><legend>Websites</legend>
    								<p><label>Website<br/><input type='text' name='web' size=38/><br /></p>
    								<p>Yahoo ID<br/><input type='text' name='ymsg' size=38/><br /></p>
    								<p>MSN ID<br/><input type='text' name='msn' size=38/><br/></p>
    								<p>GTalk ID<br/><input type='text' name='gtalk' size=38/></label></p>
    						</fieldset>
    		
    					
    					
    						<fieldset>
    								<legend>Change Password</legend>
    								<p><label>Old Password<br />
    								<input type="password" name="opass" size='38' /></p>
    								<p>New Password<br />
    								<input type="password" name="npass1" size='38' /></p>
    								<p>Repeat New Password<br />
    								<input type="password" name="npass2" size='38' />
    								</label></p>
    						</fieldset>
    						
    						<fieldset>
    								<legend>Customize</legend>
    								<p><label>Do not like the GUI, 
    								Change the one you like</label></p>
    						
    						</fieldset>
    And here is the CSS i am using

    Code:
    fieldset {
    	
    	padding: 0px 50px 10px 50px;
    	border:1px solid blue;	
    	float:left;
    	margin-right:5px;
    	color:black;
    	position:relative;
    	
    	
    	
    }
    
    
    fieldset legend {
    	padding: 0px .1em 0px .3em;
    	color:blue;
    	font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
    	
    }

    Please help me.. the one with legend customize.. comes really down.. i also wanna add three buttons .. but it doesnt come below the fieldsets.. please help me.. do i need to add one more div for button ??

    sorry for my n00bness in css :(

    thanks for ur time :)
  • realin
    Contributor
    • Feb 2007
    • 254

    #2
    well i couldnt edit the above post so i have to reply to it and to make my post more clear i am adding the actual picture of the layout.. now the problem/issue is more clear to you experts, please help me guys



    i hope you can see the image, the direct link is here

    Direct Link

    Comment

    Working...