Please look at this page:

Visit My Website

 

I want the two pics (which are in divs) side-by-side.

 

Its so ffrustrating cuz people have ben helping me solve this but with no luck

 

/* stylesheet for products-womenstees.html */

Here,s the CSS codeing:

body {
     background-color:#000000;
     }


#body { 
      color:#ffffff
      text-align:center;
      font-size:20px
      }


#images {
        height:500px;
        width:200px;
       }

.images {
        height:300px;
        width:200px;
       }


img {

   }

stick

 

width:800px; into

 

#body {

color:#FFFFFF;

text-align:center;

}

stick

 

width:800px; into

 

#body {

color:#FFFFFF;

text-align:center;

}

 

it moved everything to the left a little, still not side-by-side??

not a HTML problem is it?

display: block or inline-block?

Sorry boo bood

Sorry boo bood

 

yes float:left; works!! block and inline-block didnt.

 

is there any way now i can get them to center instead of float to the left??

if i was you i would create a div class="img_holder" for each image and float them to the left...

Stick all the images in an unordered list, then use display: inline on each list item. Add some extra css to give a margin to each image or list item and bob's your uncle. This allows for future development on new images without having to hack the code some more. Also keeps down the amount of divs in your code.

Stick all the images in an unordered list, then use display: inline on each list item. Add some extra css to give a margin to each image or list item and bob's your uncle. This allows for future development on new images without having to hack the code some more. Also keeps down the amount of divs in your code.

 

think thats the way to go. cheers.

or use a table layout, either with tables or divs

or use a table layout, either with tables or divs

 

Well ive managed to align the pics side-by-side but floated to the left not centered!

Another problem has arisen now though - the footer text isnt at the bottom of the page!

Take a look: Visit My Website

Help!!!

Try adding clear: both; to your footer css.

 

Also check all your widths add up with a bit to spare...

 

PS you need to change your image id to a class cos u use it more than once on the page.

 

I hope this helps

 

Also try using margins / padding to get images where u want them, just make sure your container is big enough.

tip: colour code your designs whilst working on the layout

The following is your code validated transitional with the layout requirments:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="skate, skateboard, surf, bmx, rock, punk, alternative, clothing, clothes, wales, welsh"/>
<link rel="stylesheet" type="text/css" href="http://www.blackhillclothing.com/index/bhc.css" title="stylesheet"/>
<link rel="stylesheet" type="text/css" href="womenstees/womenstees.css" title="stylesheet"/>
<title>Womens T-Shirts - BlackHill Clothing</title>
<style type="text/css">
#images {width:450px; background-color:#00FF00; margin-left:auto; margin-right:auto; }
#prod1 {background-color:#FF0000; float:left; width:200px; text-align:center; }
#prod2 {background-color:#FFFF00; float:right; width:200px; text-align:center; }
</style>
</head>

<body>
<div id="header">Womens T-Shirts</div>

<div id="menu">
<ul>
<li><a href="../index.html">home</a></li>
<li><a href="../aboutus.html">about us</a></li>
<li><a href="../products.html">products</a></li>
<li><a href="../gallery.html">gallery</a></li>
<li><a href="../links.html">links</a></li>
<li><a href="../contactus.html">contact us</a></li>
<li><a href="../smallprint.html">small print</a></li>
</ul>
<div class="clearfix"></div>
</div>

<div id="body">
<p>All T-Shirts £10 plus FREE P&P! for all mainland UK orders.</p>

<div id="images">
<div id="prod1">
<img class="images" alt="Womens Stripe T-Shirt" src="http://www.blackhillclothing.com/products/womenstees/womenstripe.jpg" />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<p><strong>Ladies Team Stripe</strong><br/>
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="business" value="matt.allen360@btinternet.com"/>
<input type="hidden" name="item_name" value="Ladies Black Team Stripe T Shirt"/>
<input type="hidden" name="amount" value="10.00"/>
<input type="hidden" name="no_shipping" value="2"/>
<input type="hidden" name="return" value="http://www.blackhillclothing.com/products.html"/>
<input type="hidden" name="cancel_return" value="http://www.blackhillclothing.com/home.html"/>
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="currency_code" value="GBP"/>
<input type="hidden" name="lc" value="GB"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="hidden" name="on0" value="Size"/>Size<select name="os0"><option value="Medium">Medium</option></select><br/>
<input type="hidden" name="on1" value="Colour"/>Colour<select name="os1"><option value="Black">Black</option></select>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." />
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
</p>
</form> 
</div>

<div id="prod2">
<img class="images" alt="Womens Shred T-Shirt" src="http://www.blackhillclothing.com/products/womenstees/womenshred.jpg" />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<p><strong>Ladies Shred 'Til Yer Dead</strong><br/>
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="business" value="matt.allen360@btinternet.com"/>
<input type="hidden" name="item_name" value="Ladies Black Shred T Shirt"/>
<input type="hidden" name="amount" value="10.00"/>
<input type="hidden" name="no_shipping" value="2"/>
<input type="hidden" name="return" value="http://www.blackhillclothing.com/products.html"/>
<input type="hidden" name="cancel_return" value="http://www.blackhillclothing.com/home.html"/>
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="currency_code" value="GBP"/>
<input type="hidden" name="lc" value="GB"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="hidden" name="on0" value="Size"/>Size<select name="os0"><option value="Medium">Medium</option></select><br/>
<input type="hidden" name="on1" value="Colour"/>Colour<select name="os1"><option value="Black">Black</option></select>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."/>
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1"/>
</p>
</form>
  </div>
  <div class="clearfix"></div>
</div>

</div>

<div class="clearfix"></div>
<div id="footer">All content copyright © Blackhill Clothing 2008.</div>

</body>

</html>

ps you might be better off setting up an open source ecommerce script?

ps you might be better off setting up an open source ecommerce script?

 

THANKS SO MUCH mikejonesey!!!

Finally its done! Looking at your code too it all makes sense so i have learned from you aswell for the future. Thanks alot!