• From: Toronto, On
  • Registered: April 22, 2009
  • Posts: 44

Topic: clearing float not working (accordian scripts)

Alright so I'm trying to decipher an "Accordion Content script".

Basically it's a list of offices and when you click an office it expands to give a short paragraph detailing the responsabilities

=====
- President
- Vice-President
- Secretary
=====

=====
- President
+ Vice President
The Vice-President is tasked with taking over the role of President should the 
President become unable to perform his duties
- Secretary
=====

My current goal is to add an image of the person for each office. Right now I'm using a 100x100 placeholder image and with some floating help, I've been able to get the pictures to show up on the left. The paragraph wraps nicely to the right.

The problem is that the 'paragraphs' are very short. The next title is often showing up to the right of the image.

It looks some thing like this:

=====
- President
xxxxxxx  The role of the President is to guide us 
xxxxxxx  and make sure we do nothing wrong
xxxxxxx  
xxxxxxx  - Vice President
- Secretary
=====

Here's the CSS for the image

.headshot { /* head shots of office holder */
float: left;
width: 100px;
margin: 0 10px 10px 0;
background-color: #d4d2d2;
padding: 5px;
clear:both}

I was hoping the clear would push the next office title below it but all that does is prevent the images from doing a little step like shift to the right.

Here's a sample from the html

<div class="technology">Hospitality/newcomers:</div>
<div class="thelanguage">
<div class="headshot"><img src="images/luigi_avatar.gif" alt="Picture" width="100" height="100"><br>
John Doe</div>
We put much emphasis on the comfort and warmth that members and visitors feel when coming into the House. Their mandate is to welcome you, serve you and forward any of your questions or concerns.
</div>


<div class="technology">Ushers board</div>
<div class="thelanguage">
<div class="headshot"><img src="images/luigi_avatar.gif" alt="Picture" width="100" height="100"><br>
John Doe</div>
This ministry is imperative to order. Their goal is to keep order within the sanctuary.
</div>

In addition to that I'm having problem changing the class name. 'technology' and 'thelanguage' don't really explain anything and get lose in the sea of CSS selectors.

Last edited by wolfkin (April 23, 2009 8:50 pm)

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: clearing float not working (accordian scripts)

Try adding the clear:both on the technology class?

Short of that, there is a clearing method found at the csscreator.com site that I have had good luck with.

/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/

Use that class on the outer wrapper that contains the floated items. In this case, add it to the technology classed div. (I think)

My signature goes here --> X

Vote up Vote down

  • From: Toronto, On
  • Registered: April 22, 2009
  • Posts: 44

Re: clearing float not working (accordian scripts)

boy do I have egg on my face. well sorry and thanks.

thanks a brick ton. adding clear to the technology class did the trick.

Vote up Vote down