Hello i am in need of major help with my website i'm making. I want to make a splash page that will have a total of 5 different images which will be placed into 5 div boxes as well as a social section underneath which will display links to twitter, facebook and youtube. I've gotten all the images done but need help in creating the div boxes and positioning the images into those boxes. Heres an image i made to show you how i would like it to look like, http://img687.imageshack.us/img687/2550/splash2peter.jpg And here is my code so far, <!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> <title>Football Club</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Football Club"/> <meta name="keywords" content="Football"/> <link rel="shortcut icon" href="favicon.ico" > <link rel="icon" href="favicon.ico" type="icon" > <style type="text/css"> body { background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div class="socialbox"><h4> Follow Us On:</h4><div align="right"><a href="http://www.facebook.com"><img src="images/facebook_social.png" border="0" alt="Find Us On Facebook" /></a><a href="http://www.twitter.com"><img src="images/twitter_social.png" border="0" alt="Find Us On Twitter" /></a><a href="http://www.youtube.com"><img src="images/youtube_social.png" border="0" alt="Find Us On Youtube" /></a></div></div> </body> </html> Code (markup): Any help would be great? Thankyou!
Hi, Would suggest making one large outer div to hold the main content then another two for the left hand side box and the right hand side 4 boxes part. Once this is in place you should be able to drop the content in place, assuming the 4 boxes are purely images? You won't need a seperate div for each if they are as they should just drop straight in. This will ensure a cleaner site with less <div> elements! So you want something like this, but with the width and height you want for the sections <div style="width:500px; height: 250px; border: 1px solid #000; padding: 0px; margin: auto; margin-top: 300px;"> <!-- left box --> <div style="width:100px; padding: 0px; float: left;"> image 1</div> <!-- right box--> <div style="width: 400px; padding: 0px; float: right;"> images 2-5</div> </div> Code (markup): Apologies if that isn't 100% correct, it's off the top of my head without testing so let us know how you get on.