so much trouble with css: layout problem

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:

so much trouble with css: layout problem

Post 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>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: so much trouble with css: layout problem

Post 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)
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

BrainJar is a good resource for all things client-side (and some server-side).
Post Reply