Hey, I want my three images to be set as a background side by side in the center of the page with a logo on the top center. My current css code is #features { } #features #feaTure0 { background: url(version2/logo.jpg) no-repeat; width:229px; height:194px; padding:0;float:center; } #features #feaTure1 { background: url(version2/1.jpg) no-repeat; width:229px; height:168px; padding:10;float:center; } #features #feaTure2 { background: url(version2/2.jpg) no-repeat; width:229px; height:168px; padding:10;float:left; } #features #feaTure3 { background: url(version2/3.jpg) no-repeat; width:229px; height:168px; padding:10;float:left; } Code (markup): and my div is <div id="features" align="center"> <p align="center"> <div id="feaTure0"></div> <div id="feaTure1"></div> <div id="feaTure2"></div> <div id="feaTure3"></div></p> <div style="clear:left;"></div> </div> Code (markup): my logo goes into the center but my other images don't. the other 3 images are shifted to the left side by side of the screen most likely due to the "float:left;" but when I set it to center, they go into the center but they're no longer side by side. How do I fix this?
float:center? Last time I looked there was no float:center only float:left, float:right and the default float:none
Also note that browsers will ignore something like 'padding: 10', as it has no units. This might help. I simplified the markup slightly and removed the deprecated 'align' tags. Note that you can centre a block level element with CSS by setting the side margins to 'auto', provided that the element has been given a width (and also that a valid DOCTYPE is present at the top of the page). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>Centre Images</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } #features { margin: 0 auto; width: 750px; } #feaTure0 { background:url(version2/logo.jpg) no-repeat; width:229px; height:194px; padding:0; margin:0 auto; } #feaTure1 { background:url(version2/1.jpg) no-repeat; width:229px; height:168px; padding:10px; float:left; } #feaTure2 { background:url(version2/2.jpg) no-repeat; width:229px; height:168px; padding:10px; float:left; } #feaTure3 { background:url(version2/3.jpg) no-repeat; width:229px; height:168px; padding:10px; float:left; } #clear { clear:left; } </style> </head> <body> <div id="features"> <div id="feaTure0"></div> <div id="feaTure1"></div> <div id="feaTure2"></div> <div id="feaTure3"></div> <div id="clear"></div> </div> </body> </html> Code (markup):
Clearing DIV? What is this, 1997? Also on the logo that makes zero provisions for accessbility in terms of images off behavior and nothing for search engines to look at either - so likely that should be a h1 with a glider-levin type image replacement... and there's really no need for six ID's in that layout either. Lemme show you a little... trick. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Centre Images </title> <style type="text/css"><!-- /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,menu,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body { text-align:center; /* center #features IE 5.x */ } #pageWrapper { margin: 0 auto; width: 750px; } h1 { position:relative; text-align:center; padding-top:80px; font:bold 32px/34px arial,helvetica,sans-serif; } h1 span { position:absolute; top:0; left:0; width:750px; height:194px; background:url(version2/logo.jpg) top center no-repeat; } h1 b { display:block; padding-top:80px; background:url(version2/1.jpg) 10px 90px no-repeat; } h1 b b { padding:0; background:url(version2/2.jpg) 259px 10px no-repeat; } h1 b b b { height:188px; background:url(version2/3.jpg) 508px 10px no-repeat; } --></style> </head><body> <div id="pageWrapper"> <h1> Site Name <span></span> <b><b><b></b></b></b> </h1> <!-- #pageWrapper --></div> </body></html> Code (markup): The text ends up hidden under the span which has your logo as it's background - so images-off the user has something to at least tell them where they are. Since you should only have one h1 per page this makes certain your document structure starts out on the right foot AND means we don't need extra DIV's, ID's or classes to handled placement. We can nab both the overlaid image and the three sub images as child elements of the heading - the nested bold tags allowing us to target each of those in turn. Less markup, about the same CSS, no worries about floats or clearing since we position those three inner images with background-position.