Problems with right column in multi-column CSS layout

Discussion in 'CSS' started by patwa, Dec 23, 2008.

  1. #1
    Hello,

    I'd really appreciate any help with this. I've used a tutorial to guide me in making a multi-column layout for my homepage at:
    http://www.patwanet.co.uk/index_old.shtml

    Don't worry about the left column for now, but as you can see it's been properly formatted to put space where I want it. However the same isn't so for the right. The list of google ads that appears at the bottom of the main section should be on the right, but even after increasing the space in the stylesheet, it just won't sit there.

    I've attached files for the homepage, stylesheet and the include containing the google code.

    index_old.txt = the main homepage index_old.shtml
    main.txt = the stylesheet main.css
    adsense120x600.txt = the good ad code wrapped into a table adsense120x600.html

    Everything works apart from the right column :(

    If someone could point me where I'm going wrong I'd really appreciate the help.

    Thanks, and Season's Greetings to you all.

    H.
     

    Attached Files:

    patwa, Dec 23, 2008 IP
  2. planemaniac

    planemaniac Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I've fixed it (I think).

    If you go to http://www.latinvocabulary.co.uk/patwacss.css to download the NEW CSS file. Backup your old one just in case. As far as I can remember, I didn't make any changes to the HTML file, apart from this (and it's very important you do this).

    Make sure your right column section goes like this...

    <div class="rightcol">
    <script type="text/javascript"><!--
    google_ad_client = "pub-******************";
    /* 120x600, created 12/22/08 */
    google_ad_slot = "*********";
    google_ad_width = 120;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    
    HTML:
    WITH all your normal codes in there. No including of the ad file. That was silly.

    I hope that helps. PM me if it works/if it doesn't, so I know if I can delete the file off my server.
     
    planemaniac, Dec 23, 2008 IP
  3. patwa

    patwa Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Thanks for the post, I've downloaded the file and am going to test it this evening.

    Just out of curiosity, why do you say not to include the Google code? I thought that would make it simpler to include on every page if the code was in a separate file that could just be called as needed?

    Thanks.

    H.
     
    patwa, Dec 24, 2008 IP
  4. planemaniac

    planemaniac Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Oh, well in that case, what I really meant was, in your Google code, don't have any of the <html><head> stuff, and definitely don't have the tables. Just have it as a .html file with the <script> tags, and the Google code inside. Otherwise there's a chance it will ruin all the formatting.
     
    planemaniac, Dec 24, 2008 IP
  5. patwa

    patwa Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hello,

    Thanks, I think I understand now. Also, sorry for taking so long to get back to you, for some reason I didn't get an e-mail note about your reply.

    Anyway, I have a second question if anyone has a moment. Going back to the original page at www.patwanet.co.uk/index_old.shtml you can see that the navigation bar is below the logo, but this leaves a lot of white space beside the logo which I think looks a little unsightly. I want to have the navbar filling up the remainder of the width of the page, sitting next to the logo with the bottom of the navbar lined up with the bottom of the logo. Then, as the navbar is only a thin strip, I think I'd like some text, say my contact number above the navbar, so it doesn't look quite so 'empty'. Imagine a line cutting the page from left to right, going across from half -way up to the logo, with the navbar below and the text above. Does that make sense?

    I was thinking of maybe using some more div id's, and using absolute positioning to set the margins, but then I realised this might mess up the look of the page on different screen sizes (I'm building the page ona 24" monitor).

    Does anyone have any tips on how I can manage this? The navbar is basically a standard table with one row and however many columns.

    I'm using the original stylesheet I attached in my first post, although I've incorporated some changes to it, I haven't done anything to the navbar or logo parts.

    Thanks very much, CSS and formatting are still new areas for me.

    H.
     
    patwa, Dec 26, 2008 IP