CSS: form layout problem using divs[SOLVED]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

CSS: form layout problem using divs[SOLVED]

Post by raghavan20 »

If you run this, you will see inspite of the first spans having a width of 100px they do not expand and stand close to the elements that come next to them.

Code: Select all

<div style="margin-top:20px; margin-left:50px; margin-right:30px; ">
		<form name="frmFeedback" method="post" action="">
			<div><span style="width:100px; ">Name</span><span style="color:#990000;">*</span>&nbsp;&nbsp;&nbsp;<input type="text" name="name" value="<?php echo $_POST["name"] ?>" /></div>
			<div><span style="width:100px; ">Organisation</span><span style="color:#990000;">*</span>&nbsp;&nbsp;&nbsp;<input type="text" name="organisation" value="<?php echo $_POST["organisation"] ?>" /></div>
			<div><span style="width:100px; ">Email</span>&nbsp;&nbsp;&nbsp;<input type="text" name="email" value="<?php echo $_POST["email"] ?>" /></div>
			<div><span style="width:100px; ">Phone</span>&nbsp;&nbsp;&nbsp;<input type="text" name="phone" value="<?php echo $_POST["phone"] ?>" /></div>
			<div><span style="width:100px; ">Project Title</span>&nbsp;&nbsp;&nbsp;<input type="text" name="project_title" value="<?php echo $_POST["project_title"] ?>" /></div>
			<div><span style="width:100px; ">Comments</span><span style="color:#990000;">*</span>&nbsp;&nbsp;&nbsp;<textarea name="comments" rows="5" cols="40"> <?php echo $_POST["comments"] ?> </textarea></div>
			<div><span style="width:100px; "></span><span><input type="submit" name="subFeedback" value="Submit Feedback" class="button" /></span></div>
		</form>
	</div>
Last edited by raghavan20 on Thu Oct 13, 2005 12:47 pm, edited 1 time in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

You can't change the dimensions of a <span> tags since they are not block-level elements, they are just sections of code ;)

You'll need to use <div> tags along with the CSS "float" attribute ;)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

yes, d11wtq, I understand span elements are inline elements not block level.
have a look at this in IE and in Mozilla

Code: Select all

<span style = 'width:500px; color:blue; height: 50px; background-color:red;'>Do you call this as weird 

behavior</span>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

raghavan20 wrote:yes, d11wtq, I understand span elements are inline elements not block level.
have a look at this in IE and in Mozilla

Code: Select all

<span style = 'width:500px; color:blue; height: 50px; background-color:red;'>Do you call this as weird 

behavior</span>
I'll guess that IE treats the span as block-level :) It's no surprise that that's incorrect :P

If you use

Code: Select all

<div><div style="width:100px; float: left ">Name</div><div style="float: left"><span style="color:#990000;">*</span>&nbsp;&nbsp;&nbsp;<input type="text" name="name" value="<?php echo $_POST["name"] ?>" /></div></div>
You should have some joy ;)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

you hv used two divs with float property which i think its not necessary as it wld work with a single float property

Code: Select all

<div><div style="width:100px; float: left ">Name</div><div style=""><span 

style="color:#990000;">*</span>&nbsp;&nbsp;&nbsp;<input type="text" name="name" value="" /></div></div>
thanks for your help d11wtq
Post Reply