Hi: I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it. <div class="clearfix"> <div style="float: left; width: 25%;"> <a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110" style="border: 0;" /></a><br /> <h3 align=center>The Family</h3> <a href="the-family.html">Read more...</a> </div> <div style="float: left; width: 25%;"> {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." /> <h3 align=center>The City of Tehran</h3> <p align=center>View the Gallery</p>{/arifancybox} </div> <div style="float: left; width: 25%;"> {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." /> <h3 align=center>The City of Rasht</h3> <p align=center>View the Gallery</p>{/arifancybox} </div> <div style="float: left; width: 25%;"> {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." /> <h3 align=center>Gilan Province</h3> <p align=center>View the Gallery</p>{/arifancybox} </div> </div> Code (markup): Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div. What I want is to center the content of each of those 4 divs. The content is both text and image. Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div. Any help would be appreciated. Thanks.
It is always a good idea to separate the styling (CSS) from the content (HTML). HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>----</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <br> <div class="clearfix"></div> <div class="my_box"> <img src="graphics/friends.png" height="110" width="220"> <h3>The Family</h3> <a href="the-family.html">Read more...</a> </div> <div class="my_box"> <img src="graphics/Teheran.png" alt="tehran-gallery" height="110" width="220"> <h3>The City of Tehran</h3> View the Gallery </div> <div class="my_box"> <img src="graphics/rasht.png" alt="rasht-gallery" height="110" width="220"> <h3>The City of Rasht</h3> View the Gallery </div> <div class="my_box"> <img src="graphics/gilan.png" alt="gilan-gallery" height="110" width="220"> <h3>Gilan Province</h3> View the Gallery </div> </body></html> HTML: CSS Code: *{ padding:0; margin:0; } body{ font-family:Arial,Helvetica,sans-serif; font-size:13px; } .my_box { float: left; width: 25%; text-align: center; } /*------------------------re-definitions-----------*/ h3{ font-size:14px; font-weight:bold; color:#0464a1; width:auto; padding:5px 10 5px 0px; margin:auto; text-decoration:none; text-align:center; } Code (markup): See the result here: http://comp-4u.com/dp/alisamii/test.html Note: Sorry about the family picture - had none of yours so I substituted a picture of me and my friends.
You could use this tool: http://www.pagecolumn.com/4_column_div_generator.htm Here is a sample made with the above mentioned tool: CSS .wrapper{ position: relative; float: left; left: 24px; width: 960px; } .left1{ position: relative; float: left; left: 1px; width: 238px; } .left2{ position: relative; float: left; left: 3px; width: 238px; } .left3{ position: relative; float: left; left: 5px; width: 238px; } .right{ position: relative; float: right; right: 1px; width: 238px; } Code (markup): HTML <div class="wrapper"> <div class="left1"> left1 </div> <div class="left2"> left2 </div> <div class="left3"> left3 </div> <div class="right"> right </div> </div> Code (markup):