Page 1 of 1

so much trouble with css: layout problem

Posted: Thu Oct 13, 2005 2:03 pm
by raghavan20
I want a few things sorted out with css layout; any help is appreciated.

The layout works fine in IE but I would like to know how I can make a few modifications in the layout
1. You could see this title " Product Id: 10001 Product Name: 60 GB IPOD" next to a small ipod picture.
I want the title to center or display on the top of the div but now it displays at the bottom

2. There is an unnecessary space between two divs; you can see white space btw the gray div and blue div.
how to get rid of that?

3. Is it possible to center the paypal button in the center of the page rather at the top left corner?
Is there is any other property other than 'padding' available to bring the desired layout

In Mozilla

1. The float-left property is used; the paypal button here jumps out of the parent div and floats in the second line. why and how to fix it?

Code: Select all

<div style="height:70px; border:2px solid #000000; ">
	<div style="float:left; height:70px; width:400px; background-color:#CCCCCC; ">
		<span><img src="http://thumbs.ebaystatic.com/pict/58180242996464_0.jpg"  style="width:50px; height:70px; " /></span>
		&nbsp;&nbsp;<span>Product Id: 10001 Product Name: 60 GB IPOD</span>
	</div>
	<div style=" background-color:#AED0F9; height:70px; width:300px;">
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
		<input type="hidden" name="cmd" value="_s-xclick">
		<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
		<input type="hidden" name="encrypted" value="	">
		</form>
	</div>
</div>

Re: so much trouble with css: layout problem

Posted: Thu Oct 13, 2005 5:49 pm
by Chris Corbyn
raghavan20 wrote:I want a few things sorted out with css layout; any help is appreciated.

The layout works fine in IE but I would like to know how I can make a few modifications in the layout
1. You could see this title " Product Id: 10001 Product Name: 60 GB IPOD" next to a small ipod picture.
I want the title to center or display on the top of the div but now it displays at the bottom

2. There is an unnecessary space between two divs; you can see white space btw the gray div and blue div.
how to get rid of that?

3. Is it possible to center the paypal button in the center of the page rather at the top left corner?
Is there is any other property other than 'padding' available to bring the desired layout

In Mozilla

1. The float-left property is used; the paypal button here jumps out of the parent div and floats in the second line. why and how to fix it?

Code: Select all

<div style="height:70px; border:2px solid #000000; ">
	<div style="float:left; height:70px; width:400px; background-color:#CCCCCC; ">
		<span><img src="http://thumbs.ebaystatic.com/pict/58180242996464_0.jpg"  style="width:50px; height:70px; " /></span>
		&nbsp;&nbsp;<span>Product Id: 10001 Product Name: 60 GB IPOD</span>
	</div>
	<div style=" background-color:#AED0F9; height:70px; width:300px;">
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
		<input type="hidden" name="cmd" value="_s-xclick">
		<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
		<input type="hidden" name="encrypted" value="	">
		</form>
	</div>
</div>
1, 2 and 3: Learn more on how to float divs (and also the "clear" attribute)

Posted: Fri Oct 14, 2005 6:34 am
by foobar
BrainJar is a good resource for all things client-side (and some server-side).