Jump to content
wolfkin

Clearing Float Not Working (accordian Scripts)

Recommended Posts

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 PresidentThe 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:

=====- Presidentxxxxxxx  The role of the President is to guide us xxxxxxx  and make sure we do nothing wrongxxxxxxx  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}

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>

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. How can I stop the wrapping and push the next title/header below my images?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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...