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>
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.
First, when posting code, post the server output, not the raw code including server-side scripting or instructions, e.g. {arifancybox activeType=“flickr” type=“customtext” source=“photoset” photosetId=“72157624564172740” apikey=“166cd0f079225ba7aa06e3ec838f6e62”}.
Simply move the style rules to a stylesheet.
<!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">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title>Test Page</title>
<style type="text/css">
/*<![CDATA[*/
#container {
overflow: hidden;
text-align: center;
}
div.column {
float: left;
width: 25%;
}
a img {
border: none;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="column">
<a href="the-family.html"><img src=
"images/stories/demo/mom_dad.png"
width="162"
height="110"
alt="" /></a>
<br />
<h3>The Family</h3><a href="the-family.html">Read more...</a>
</div>
<div class="column">
<img src="images/stories/galleries/tehran-gallery.png"
width="220"
height="110"
alt="tehran-gallery"
title="Click for a slideshow." />
<h3>The City of Tehran</h3>
<p>View the Gallery</p>
</div>
<div class="column">
<img src="images/stories/galleries/rasht-gallery.png"
width="220"
height="110"
alt="rasht-gallery"
title="Click for a slideshow." />
<h3>The City of Rasht</h3>
<p>View the Gallery</p>
</div>
<div class="column">
<img src="images/stories/galleries/gilan-gallery.png"
width="220"
height="110"
alt="gilan-gallery"
title="Click for a slideshow." />
<h3>Gilan Province</h3>
<p>View the Gallery</p>
</div>
</div>
</body>
</html>
N.B. It is a poor practice to have an inline element like img as a sibling to a block element such as <h3> or <p>. I’d wrap the images in a <p>. There are those who don’t understand the typographical purpose of the paragraph who’d suggest using a less meaningful element such as <div>. :shrug:
So put it into one of the external stylesheets - but then if I had my way “style” would be deprecated both as an attribute and as a tag since with ONE exception (width or height where said value is the DATA) there is no excuse for that **** to ever be in the markup.
Instead of a ‘random word’ use a word that says WHAT the element is, NOT how it’s going to appear. Appearance based classes and ID’s are NO DIFFERENT from presentational markup - which one shouldn’t be using after about 2002.
You know, things like the ALIGN attribute which also has no place in the markup… or outdated nonsense like CLEARFIX, which also has no business being in the markup since the element preceeding it should probably have clearing behavior on it.
Well, I’d clean it up even MORE from Gary’s example first, since if there are no other div going into that you don’t need classes on those either.
<div id="galleries">
<div>
<a href="the-family.html">
<img src="images/stories/demo/mom_dad.png"
width="162" height="110"
alt="The Family - Mom & Dad"
/>
</a>
<h3>The Family</h3>
<a href="the-family.html">Read more...</a>
</div>
<div>
<img src="images/stories/galleries/tehran-gallery.png"
width="220" height="110"
alt="tehran-gallery"
title="Click for a slideshow of Tehran."
/>
<h3>The City of Tehran</h3>
<p>View the Gallery</p>
</div>
<div>
<img src="images/stories/galleries/rasht-gallery.png"
width="220" height="110"
alt="rasht-gallery"
title="Click for a slideshow of Rasht."
/>
<h3>The City of Rasht</h3>
<p>View the Gallery</p>
</div>
<div class="last">
<img src="images/stories/galleries/gilan-gallery.png"
width="220" height="110"
alt="gilan-gallery"
title="Click for a slideshow of Gilan."
/>
<h3>Gilan Province</h3>
<p>View the Gallery</p>
</div>
<!-- #galleries --></div>
and then find one of the many stylesheets being linked in (being joomla you’ve got what, six, seven, twenty of them?) and just append this to the end of one.
#galleries {
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, make sure floats are wrapped in legacy IE */
}
#galleries div {
float:left;
width:25%;
text-align:center;
}
#galleries div.last {
margin-right:-4px; /* prevent IE from dropping down last float due to rounding error! */
}
#galleries img {
border: none;
}
I added a extra “.last” class to deal with IE being a retard from time to time. Switch out the #galleries ID to whatever’s not in use, and you should be good to go.
That’s a very useful option, but I’m not sure how to do that.
The site is a joomla site, and I’m not sure how to implement inline css stylesheets inside a joomla module. Plus, “.container” and “.column” are already defined in the external style sheets. Of course, I could always use other words which are not defined, so that is not really a major hurdle. There are enough words in several languages (human languages) which I could use, or even use a random word.
I understand the simplicity of what you have proposed. My problem is not being exactly sure how to take your proposal and make it happen.