css clear:both issue when using the Gallery module

[stevegos]

Hi

I am using the latest cmsms 1.9.4 but using the older pre 1.6 default template style: header, left column with menu, right content with footer under. All quite straight forward.

When using the gallery module, I insert the usual gallery tag. The photo thumbs are disaplyed and work fine, but the content under the gallery is cleared to the point under the left menu.

In the gallery template "slimbox" ther eis a <div class="galleryclear"></div> which clears the floated thumbnails.

But it seems this clear is clearing both columns.

Any ideas? Hope it makes sense. the site is not on a public server so cannot link to the site.

All help greatly appreciated.

Steven

here's an excert of the code from the template:

Code: Select all

<div id="pagewrapper">

    {* start accessibility skip links *}
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    {* end accessibility skip links *}


    <hr class="accessibility" />
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   {* End Header *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}


   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Sidebar *}
      <div id="sidebar">

      {* Start Navigation *}
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='STR-DARK : simple_navigation'  collapse='1'}
      </div>
      {* End Navigation *}

      {* Start News *}
      <div id="news">
         <h2>STR News</h2>
          {news number='3' detailpage='news'}
      </div>
      {* End News *}
{global_content name='social-networks'}
      </div>
      {* End Sidebar *}


      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

         {* Start relational links *}
	 <div class="hr"></div>
	
        
      <hr class="accessibility" />
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}

this is the css from the template style sheet

Code: Select all

div#content {
   margin: 1.5em auto 2em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

div#footer {
   clear: both;      /* keep footer below content and menu */
   color: #000000;
   background-color: #009966; /* green */
   padding: 10px 0 10px 0;
}

div#footer p {
   font-size: 0.8em;
   padding: 0.5em;       /* some air for footer */
   text-align: center;  /* centered text */
   margin: 0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

There is just this at the end of the gallery to clear the gallery.

<div class="galleryclear"></div>

Code: Select all

.galleryclear {
	clear: both;
}

But it is clearing both the content and menu floats instead of just the gallery thumbnails.

[Dr.CSS]

You should use Firefox with the Web Dev. addon so you can change the style sheet on the fly and see it live, then try removing the clear both or have it clear only one side, left/right till it works as you want then you can copy that style into the style sheet...