Design problem [solved]

[tlelliott]

Hi All

I have recently made a new site at http://www.elsecar-heritage-centre.co.uk running CMS made simple v 1.1.

The problem can be viewed on the site above on prett much any page, although is less noticable on the default page.  The print button and text in a small box at the top right of the content area is pushed across to the left by the width of the adverts.

I am using the Layout: Left sidebar + 1 column template but have tried to add an extra thin column to the right of the content for displaying adverts and I believe it's my fiddling that has caused this problem.

The changes made to the "Left sidebar + 1 column" stylesheet are I think all in:

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: 12em; /* and some air on the right space for adverts */
}

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#adverts{
  float: right;        /* set sidebar on the left side. Change to right to float it right instead. */
  width: 10em;    /* sidebar width, if you change this please also change #main margins */
  margin-right: 0;
  position: relative; top: 0px; right: -200px;
}

Have added 12em margin-right for to give the advert column space and made the width of the advert column 10em. 

The content part of the template looks like this:

 
 

     
     

     
     
        Navigation
        {menu template='simple_navigation.tpl' collapse='1'}
     
     

     
     
        News
          {news number='3' detailpage='news'}
     
     

     
     

     
     
        Adverts
         
{cms_module module='Banners' category="100x100"}
         
     
     

     
     
        {print showbutton=true script=true}
        {title}
        {content}


       


{anchor anchor='main' text='^ Top'}

       
            {cms_selflink dir="previous" label="Previous page: "}

            {cms_selflink dir="next"}
       
       


     
     
 

I must admit I am really a newbie in terms of CSS positioning of content so hopefully I have made a simple and stupid mistake that can be easily rectified.

Any help would be much appreciated. 

Thanks in advance
Tim Elliott

[RonnyK]

Why don't give the div#adverst a float-right and width%, where afterwards you can give a mrgin-right to the main, similar to the margin-left for the sidebar. That way you float, left/right and have the rest in the middle.

Ronny

[tlelliott]

Hi RonnyK

Thanks for the reply.  I've tried doing what you suggest by changing the main and adverts as follows:

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: 20%; /* and some air on the right space for adverts */
}

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#adverts{
  float: right;        /* set sidebar on the left side. Change to right to float it right instead. */
  width: 17%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX IE double margin bug */
  margin-right: 0;
}

Now the adverts appear in the area inside the central area that was previously empty.  Any idea why the content won't spread across the full width of the central area?

Thanks
Tim

[tlelliott]

Another thing that may help is that if I remove the advert area from the template the text spreads across the central area as expected.

Confused!

Tim

[tlelliott]

More information.

If I place the adverts area after the central content in the template, the central area appears correctly but the adverts start lower down the page than the bottom of the central content.

Tim

[RonnyK]

It's the banner DIV that causes the problem. You should pull that calling inside the div#header and float it right, you'll see that if you remove the calling in the template, the content goes back to where it belongs.

Ronny

[tlelliott]

Thanks for your help.  All looks as it should now.  I'm learning.

[Dr.CSS]

tlelliott...

You need to go back to the top/original post and click the Modify button to add [solved] ...

thanx...