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>
<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>