css float and clear problem

[revmarkp]

Sorry if this is on the forum somewhere, but I have searched diligently...

I'm wanting to create a content page similar to this:
http://www.cheshiresouth.org.uk/churches.html

I've been given the impression that I shouldn't use tables for laying something like this out - correct??

So, I'm trying to implement something in CSS instead, using the floatutorial here:http://css.maxdesign.com.au/floatutoria ... al0405.htm

I've created the following code in the content section of my standard template page:

Code: Select all

<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<br class="clearboth">
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<p>&nbsp;</p>

I've created an additional style sheet and linked it to the template also:

Code: Select all

.thumbnail
{
float: left;
width: 90px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.clearboth { clear: both; }

Everything looks fine in the FCKEditor in preview, but when I look online it looks like this:
http://www.thecrossing.co.uk/index.php?page=float-test

Not sure if it's important but aft er I 'apply' I notice that the editor (or something?) has changed the '<br' line to this:

Code: Select all

<br class="clearboth" />

Am I right in trying to do this in this way or whould I simply do a WYSIWYG table in the editor? If the former any comments on where I might be going wrong greatly appreciated. Perhaps it's the way I've linked my additional css or something?

Thanks.

[Dr.CSS]

I notice you say in "FCKEditor" there is a good chance it has a setting in it to add that to all br tags...

I'm surprised it even works at all as it was removed from the forge a long time ago and now we use tinyMCE or Microtiny for editors now, either you have a very old version of CMSMS or ?...

[revmarkp]

Thanks Admin.

OK hands up, I confess I'm running CMS Made Simple 1.8.1

I'll do some updating and report back.

[revmarkp]

And... I'm back. OK updated my site to 1.10.3 which was a good excercise for me to learn anyway.

Now here's the same issue: http://www.pengelly.info/index.php?page=test-float

this is my html inserted in the content section of my template:

Code: Select all

<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" />Caption</div>
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<br class="clearboth" /> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<br class="clearboth" /> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<br class="clearboth" /> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div> 
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>

and here's the css added to my main layout style sheet:

Code: Select all

.thumbnail
{
float: left;
width: 90px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.clearboth { clear: both; }

This 2nd attempt is perhaps indicating that the '<br class="clearboth" />' not working properly on the 2nd row is related to the 'news' global content block affecting the layout of my floats - yes??

[Dr.CSS]

If you actually add that to the style sheet you will get 2 image, br, 2 images, br,...

So it will give you 2 columns of images...

[revmarkp]

Thanks DrCSS.

If you actually add that to the style sheet you will get 2 image, br, 2 images, br,...

So it will give you 2 columns of images...

Right, that's what I thought and was trying to achieve. The issue though, (as shown in my linked example,) is that after the first break the next floated row doesn't line up properly - there's a big gap between the first and 2nd rows - until after the bottom of the news content block (when viewing in firefox and chrome anyway)?

What's causing that gap is what I'm trying to figure...

[Dr.CSS]

The clear:both call will make it clear everything on the left and right so the first one is pushing/clearing the news item on the left, try putting them in a container XXpx as wide as 2 images plus the margin/padding...

[revmarkp]

Thanks for your patience Dr.CSS. I think that is exactly what I need to do...

I guess I assumed that anything entered into the 'content' section of the template page would be treated as within it's own container?


Ummm, if anyone is kind enough to help this noob as to how exactly to do this, v. grateful

[Dr.CSS]

It would take someone logging into your site to fix it...