Joomla Templates Club 406,261 posts

[darrenf Friend darrenfJoin date: December 2009Posts: 158Downloads:0Uploads:3 Thanks: 9 Thanked: 9 times in 1 posts]

#148549

Hi guys,

Any one knows how to properly code for multiple lines of pictures and details when using DIVs?

I noticed that these were the codes.

<div class=”clearfix”>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-5.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas risus tempor</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-6.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Iaculis id pulvinar</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-7.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas tempor justo</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a></div>
<div style=”float: right; width: 25%;”><img src=”images/stories/demo/sam-8.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Ornare lacinia non?</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /></div>
</div>

I do I do a next line and ensure that the content does not get misaligned.

Thanks in advanced.

[darrenf Friend darrenfJoin date: December 2009Posts: 158Downloads:0Uploads:3 Thanks: 9 Thanked: 9 times in 1 posts]

#332242

Alright, I figured a work around. If anyone knows a better or a proper way to do this, please let me know.

<div class=”clearfix”>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-5.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas risus tempor</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /><br /></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-6.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Iaculis id pulvinar</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /><br /></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-7.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas tempor justo</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /><br /></div>
<div style=”float: right; width: 25%;”><img src=”images/stories/demo/sam-8.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Ornare lacinia non?</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /><br /></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-5.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas risus tempor</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-6.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Iaculis id pulvinar</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /></div>
<div style=”float: left; width: 25%;”><img src=”images/stories/demo/sam-7.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Egestas tempor justo</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /></div>
<div style=”float: right; width: 25%;”><img src=”images/stories/demo/sam-8.png” border=”0″ alt=”by Photos8.com” title=”by Photos8.com” />
<h3 style=”margin-bottom: 3px;”>Ornare lacinia non?</h3>
<a class=”readon” href=”#” title=”Sample link”>Project detail</a><br /><br /></div>
</div>

[Author]

Posts