Page 1 of 1

CSS: form layout problem using divs[SOLVED]

Posted: Thu Oct 13, 2005 10:14 am
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>

Posted: Thu Oct 13, 2005 11:12 am
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 ;)

Posted: Thu Oct 13, 2005 11:46 am
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>

Posted: Thu Oct 13, 2005 12:09 pm
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 ;)

Posted: Thu Oct 13, 2005 12:46 pm
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