MRGRIM Posted December 8, 2009 Posted December 8, 2009 I'm finally moving away from designing layouts with tables however this CSS stuff is rather tricky Could someone please help me center align up to 5 div's within another div? Website example is www.myaudiodirect.com I want those 2 photographs to appear on the same line but align them to the center of the big blue div. I've tried a couple of things and Just can't see to get it right. layout.css html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; border: 0; } body{ background-color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align: center; } #wrapper{ width: 770px; margin:10px auto; border: 1px solid #000000; text-align:left; } #headerlogo{ height: 300px; background-image: url(../images/header.jpg); background-repeat: no-repeat; } #title{ } #content{ background-image: url(../images/background.jpg); color:#ffffff; height: 1000px; } #photo{ height: 200px; width: 150px; margin-left: auto; margin-right: auto; overflow: auto; margin:0 auto; background-image: url(../images/photo.gif); background-repeat: no-repeat; } index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MyAudioDirect</title> <link href="css/layout.css" rel="stylesheet" media="all" type="text/css" /> </head> <div id="wrapper"> <div id="headerlogo"></div> <div id="content"> <div id="photo" style="position: relative; top:100px;">x</div> <div id="photo" style="position: relative; top:100px;">x</div> </div> </div> </body> </html> Quote
Jason Cooper Posted December 8, 2009 Posted December 8, 2009 Just have the one photo div and put the images in that (if you need to put different styles on the images then put then in their own spans). Quote
MRGRIM Posted December 8, 2009 Author Posted December 8, 2009 Right, I'm not sure I fully understand what you mean as I want to overlay other images onto those photo's and also some text into the white space. Is your recommend way still the best solution to this? Quote
Jason Cooper Posted December 8, 2009 Posted December 8, 2009 Here is a possible way to do this (Though I will be interested to hear how other people tackle this). Wrap your photo divs in an div with an ID of photos and then alter your styles to this #photo { background-image:url(http://www.myaudiodirect.com/images/photo.gif); background-repeat:no-repeat; height:200px; margin:0 auto; overflow:auto; width:150px; float: left; } div#photos { width: 300px; margin: 0 auto; } The only thing to be aware of is that you will need to alter the width of the div#photos entry if you want to put more than two divs in. Quote
MRGRIM Posted December 8, 2009 Author Posted December 8, 2009 Excellent, that works great :) thanks. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.