How can I add in a 3rd column in on the right like the one on the left ?

nizmotine · #1 Aug 11th, 2007, 23:15

Hi, I got my first questions for you all

Right, ive built this new website using a predone CSS template, but its not up to my liking yet.

what i want to do is add in a third column on the right hand side of the page, just like the one on the left, exactly the same, including the headers, colors, etc.

I am not doing the coding, I am editing it in dreamweaver, but I do look at the code and copy paste and can understand sort of whats happening.

and before i forget, the website is www.freegoodiesguide.co.uk

Thanks for any help, its great

nizmotine

nizmotine · #2 Aug 12th, 2007, 14:44

Hi guys,

I really am lost here, I dont know what to do, and I really would like to get it done asap.

It's driving me crazy !

Im also having a problem with this happening. (Its part of the redesign website)

Shot at 2007-08-12

This is probably noobish mistakes, but I have used a table to put the banners in, and the table is in what i think a CSS - P element, but still the below columns still want to move up towards the navigation bar.

sannbe · #3 Aug 12th, 2007, 22:25

try this blog...it has some decent info and links
http://forums.sixapart.com/lofiversi...hp/t22816.html

Lchad · #4 Aug 12th, 2007, 23:02

Hi!
Your #wrap width is 845. If you add another sidebar div to the right side, you are going to have to tweak all your widths. Are you all set doing that yourself?
Sidebar + main + sidebarright will have to = 845 pixels.

I've just copied and pasted the leftside bar div and placed it in the proper location of the code. However if you view this is will appear BELOW the main div because the widths are OVER 845 pixels.

Let me know if you need help with the div widths. But I didn't change things because you have graphics inside that are pretty wide.

Add this to your css

Code: Select all

#sidebarright {
    float: left;
    width: 280px;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

Here is your html
the sidebarright div is the section in red.

Code: Select all

<body><!-- wrap starts here -->
<div id="TopCol"><img src="images/360refclick.jpg" alt="Click For Free Xbox 360" width="111" height="92" /></div>
<div id="apDiv1"><img src="images/ps3refclick.jpg" alt="Click For Free PS3" width="111" height="92" /></div>
<div id="apDiv2"><img src="images/wiirefclick.jpg" alt="Click For Free Wii" width="111" height="92" /></div>
<div id="wrap">

        <!-- header -->
        <div id="header">            
                    
          <div align="right"><span class="red red" id="slogan"> Your Guide To FREE Goodies...</span></div>
          <!-- tabs -->
            <ul id="sidebar2">

<li id="current"><a href="index.html"><span>Home</span></a></li>
                <li><a href="Proof.html"><span>The Proof</span></a></li>
              <li><a href="How.html"><span>The Guide</span></a></li>
              <li><a href="TheGoodies.html"><span>The Goodies</span></a></li>
              <li><a href="FAQ.html"><span>FAQ</span></a></li>
              <li><a href="Contact.html"><span>Contact Us</span></a></li>

              <li><a href="Links.html"><span>Links</span></a></li>            
          </ul>
  </div>
        
<div id="header-logo">            
            
            <div id="logo">Free<span class="red">Goodies</span>Guide.<span class="red">co</span>.uk</div>        
            
    <div align="right"></div>
            <p>&nbsp;</p>

  </div>
<p>&nbsp;</p>
<div id="sidebar" >
  <h1> Top<span class="red"> Freebie </span> Goodies</h1>
<div class="left-box">
              <div align="center">
                <p class="style35"><strong>Click On Which <span class="red">FREE</span> Goodies You Would Like</strong> <strong>And Sign Up !</strong></p>

                <p class="style35">Microsoft Xbox 360</p>
                <p><a href="http://360giveaway.co.uk/index.php?referral=208163" target="_blank"><img src="images/360refclick.jpg" alt="Click For Free Xbox 360" width="155" height="142" /></a></p>
                <p class="style35">Sony Playstation 3</p>
                <p><a href="http://sonyps3giveaway.co.uk/index.php?referral=438589" target="_blank"><img src="images/ps3refclick.jpg" alt="Click For Free PS3" width="155" height="136" /></a></p>
                <p class="style35">Nintendo Wii</p>
                <p><a href="http://Wii.Giveaway.co.uk/index.php?referral=417571" target="_blank"><img src="images/wiirefclick.jpg" alt="Click For Free Wii" width="155" height="136" /></a></p>
                <p class="style30"><strong>Theres More <a href="TheGoodies.html" class="red">Here</a> !</strong></p>

      </div>
    </div>
                
            
    <h1><span class="red"><span class="style10">Top</span> Freebie</span> Networks</h1>
<div class="left-box">
                <p><a href="http://gameconsolegiveaway.co.uk/index.php?referral=74003" target="_blank"><img src="images/GCNet.JPG" alt="Game Console Giveaway Network" width="251" height="70" /></a></p>
      <p><a href="http://hdtv.freebiejeebies.co.uk/?id=1151 " target="_blank"><img src="images/fjbanner.JPG" alt="FreebieJeebies" width="251" height="52" /></a></p>
      <p><a href="http://Apple.real-incentives.com/?referral=28321" target="_blank"><img src="images/AppleRInet.JPG" alt="Apple Real Incentives" width="251" height="70" /></a></p>

      <p><a href="http://www.xpango.com?ref=90601720" target="_blank"><img src="images/xpangonet.JPG" alt="Xpango Free iPhone" width="251" height="90" /></a></p>
</div>    
            
    <h1>Quick Links</h1>
            <div class="left-box">
                <p align="left" class="style35">eXceem - Forum</p>
              <p align="center"><a href="http://www.exceem.co.uk/forums/index.php?referrerid=5229"><img src="images/exceemlink.JPG" alt="Visit the eXceem Forum" width="186" height="69" /></a></p>
              <p class="style35">Grab4Free - Forum</p>
              <p align="center"><a href="http://www.grab4free.com/forums/index.php?referrerid=982" target="_blank"><img src="images/grab4freelink.JPG" alt="Grab4Free Forum" width="186" height="69" /></a></p>

    </div>        
  </div>        
        
                            
<div id="main">
  <h1>What's this free stuff all about ?</h1>
    <p><span class="style23">FreeGoodiesGuide.co.uk</span><span class="style35"> is here to help you on your way to <span class="red "><strong>FREE</strong></span> goodies    !</span></p>
          <p class="style35">Have your ever fancied a freebies such as a Free PS3, Free HDTV, Free Nintendo Wii, Free iPod and Free Xbox 360 or even the latest Xbox Elite ? </p>

          <p><span class="style38">Yes ?</span> <span class="style35">Then let's get you on your way !</span></p>
    <p align="center" class="style35">Right, so I'm pretty confident in saying that you must think this is <span class="red"><strong>SCAM</strong></span> or there must be some sort of <span class="red"><strong>CATCH</strong></span>....</p>
          <p align="center"><strong>THING IS THERE IS <span class="red style30">NONE !</span></strong></p>

          <p align="center" class="style35">Let me tell you how it works. It's Simple ! It's ALL about <span class="red"><strong>Advertising</strong></span> !</p>
          <p align="center" class="style35">The <a href="TheGoodies.html">goodies</a> that you would get for <span class="red"><strong>FREE</strong></span>  are paid for by the reward websites.</p>
          <p align="center" class="style35">The reward websites get commision when the offers are completed, that pays for the goodies ! <span class="style41">It's that <span class="red">Simple</span> !</span></p>

          <p align="center" class="style26">Sign Up -&gt; Complete An Offer - &gt; Refer Others -&gt; Receive Your Goodies</p>
    <p align="center" class="style35"><strong>Want to know more ?</strong> <strong><a href="How.html" class="red">CLICK HERE</a></strong></p>
          <table width="545" border="0">
            <tr>

              <td width="74">&nbsp;</td>
              <td width="402"><table width="366" border="0" align="center" bgcolor="#ECE9D8">
                <tr>
                  <td><p align="center" class="style28">Getting  Started</p>
                    <p align="center" class="style35">It's a Simple <strong>3 Point Step</strong></p>
                    <p align="center" class="style35"><strong>1.</strong> <a href="TheGoodies.html"><strong>Choose A Free Gift</strong></a>, Sign up and Complete Just 1 Of The Offers ( &pound;5 to &pound;10 Max )</p>

                    <div align="center" class="style35"><strong>2</strong>. Refers Friends And/Or Family To Do The Same</div>
                    <p align="center" class="style35"><strong>3</strong>. Your <span class="red"><strong>FREE</strong></span> goodies are sent to you !</p>
                    <p align="center" class="style35">You can do this as many times as you wish Per Gift site, Offer &amp; Per Household.</p></td>
                </tr>

              </table></td>
              <td width="55">&nbsp;</td>
            </tr>
          </table>
          <p align="center"><strong class="style5">Note:</strong> <span class="style35">Please make sure that you have a read of the Terms &amp; Conditions of these freebies websites, to insure that you are fully aware of the small nitty gritty details.</span> <span class="style35">The free gift sites shown on FreeGoodiesGuide are <strong>ONLY</strong> open to UK Residents.</span></p>

          <h1> free freebies like wii xbox 360 ps3 hdtv ' s received by exceem forum members</h1>
                
    <div align="center">
              <table width="536" height="461" border="0">
                <tr>
                  <td height="28" colspan="2"><div align="center" class="style35">Click To Enlarge</div></td>
                </tr>
                <tr>

                  <td width="250" height="192"><a href="images/Proofpic2.1.jpg" target="_blank"><img src="images/Proofpic2.jpg" alt="Nintendo Wii" width="256" height="212" /></a></td>
                  <td width="276"><a href="images/Proofpic4.jpg" target="_blank"><img src="images/Proofpic4.jpg" alt="FREE PS3 &amp; Xbox 360" width="256" height="212" /></a></td>
                </tr>
                <tr>
                  <td height="209"><a href="images/Proofpic1.1.jpg" target="_blank"><img src="images/Proofpic1.jpg" alt="Samsung HDTV" width="256" height="212" align="middle" /></a></td>
                  <td><a href="images/proofpic3.1.jpg" target="_blank"><img src="images/proofpic3.jpg" alt="" width="256" height="212" /></a></td>
                </tr>
          </table>
          </div>

          <h1>&nbsp;</h1>
  </div>    <div id="sidebarright" >
  <h1> Top<span class="red"> Freebie </span> Goodies</h1>
<div class="left-box">
              <div align="center">
                <p class="style35"><strong>Click On Which <span class="red">FREE</span> Goodies You Would Like</strong> <strong>And Sign Up !</strong></p>

                <p class="style35">Microsoft Xbox 360</p>
                <p><a href="http://360giveaway.co.uk/index.php?referral=208163" target="_blank"><img src="images/360refclick.jpg" alt="Click For Free Xbox 360" width="155" height="142" /></a></p>
                <p class="style35">Sony Playstation 3</p>
                <p><a href="http://sonyps3giveaway.co.uk/index.php?referral=438589" target="_blank"><img src="images/ps3refclick.jpg" alt="Click For Free PS3" width="155" height="136" /></a></p>
                <p class="style35">Nintendo Wii</p>
                <p><a href="http://Wii.Giveaway.co.uk/index.php?referral=417571" target="_blank"><img src="images/wiirefclick.jpg" alt="Click For Free Wii" width="155" height="136" /></a></p>
                <p class="style30"><strong>Theres More <a href="TheGoodies.html" class="red">Here</a> !</strong></p>

      </div>
    </div>
                
            
    <h1><span class="red"><span class="style10">Top</span> Freebie</span> Networks</h1>
<div class="left-box">
                <p><a href="http://gameconsolegiveaway.co.uk/index.php?referral=74003" target="_blank"><img src="images/GCNet.JPG" alt="Game Console Giveaway Network" width="251" height="70" /></a></p>
      <p><a href="http://hdtv.freebiejeebies.co.uk/?id=1151 " target="_blank"><img src="images/fjbanner.JPG" alt="FreebieJeebies" width="251" height="52" /></a></p>
      <p><a href="http://Apple.real-incentives.com/?referral=28321" target="_blank"><img src="images/AppleRInet.JPG" alt="Apple Real Incentives" width="251" height="70" /></a></p>

      <p><a href="http://www.xpango.com?ref=90601720" target="_blank"><img src="images/xpangonet.JPG" alt="Xpango Free iPhone" width="251" height="90" /></a></p>
</div>    
            
    <h1>Quick Links</h1>
            <div class="left-box">
                <p align="left" class="style35">eXceem - Forum</p>
              <p align="center"><a href="http://www.exceem.co.uk/forums/index.php?referrerid=5229"><img src="images/exceemlink.JPG" alt="Visit the eXceem Forum" width="186" height="69" /></a></p>
              <p class="style35">Grab4Free - Forum</p>
              <p align="center"><a href="http://www.grab4free.com/forums/index.php?referrerid=982" target="_blank"><img src="images/grab4freelink.JPG" alt="Grab4Free Forum" width="186" height="69" /></a></p>

    </div>        
  </div>        
        
<!-- wrap ends here -->
</div>
        
<!-- footer starts here -->
<div class="footer">
    
        <p>    
        &copy; 2007 FreeGoodiesGuide &nbsp;&nbsp;    
        
        
        
        
        
         
        Design by: <a href="http://www.styleshout.com/" target="_blank">styleshout</a> | 
        Valid XHTML |
       CSS <a href="Sitemap.html">Sitemap</a></p>

        <table width="1226" border="0">
          <tr>
            <td width="326" height="40">&nbsp;</td>
            <td width="560"><table width="200" border="0" align="center">
              <tr>
                <td height="36"><div align="center"><span class="style10"><a href="http://www.linkreferral.com/adwel.pl?oldrefid=110080" target="_blank"><img src="http://www.linkreferral.com/images/linkreferal/linkbutton.gif" border="0" alt="Guide on how to get free xbox 360, free PS3, free Nintendo Wii. Also freebies such as PSP and HDTV" width="114" height="32" /></a></span></div></td>
                <td><!--Begin TheFreeSite.com Coding -->
                  &nbsp;<a href="http://www.thefreesite.com" target="_blank"><img src="http://www.thefreesite.com/free88.gif" alt="The Free Site!" width="88" height="31" border="0" align="top" /></a>
                  <div align="center"></div></td>

                <td><div align="center"><span class="style10"><a href="http://www.tinycounter.com" target="_blank" title="free web counter"><img border="0" alt="free web counter" src="http://mycounter.tinycounter.com/index.php?user=nizmo" /></a></span></div></td>
                <td><div align="center"><a href="http://www.pagerank10.co.uk" target="_blank"><img src="http://www.pagerank10.co.uk/pagerank10_small.gif" border="0" alt="Improve google rankings" /></a></div></td>
                <td><div align="center"><span class="style10"><a href="http://www.freebielist.com" target="_blank"><img src="images/freebielistbutton2.gif" alt="Freebie List" width="88" height="31" /></a></span></div></td>
              </tr>
            </table></td>
            <td width="326">&nbsp;</td>
          </tr>
        </table>
        <p>&nbsp;</p>

        <p align="center" class="style14"><span class="style10"><span class="style9"><span class="style22"><a href="http://www.ukcrawler.co.uk" class="style9">UK Search Engine </a></span></span><a href="http://www.startranking.com"><span class="style9"><span class="style9">    Search Engine Optimization</span> </span></a><a href="http://www.instantlinkexchange.com" class="style9">Reciprocal Link Exchange</a>
  
  
  <a href="http://www.whiterankers.com" class="style9">Advertise Your Website Free</a>&nbsp;<a href="http://www.freespider.com" target="_top" class="style9">FreeSpider</a> <a href="http://www.submitexpress.com/" class="style9">Search Engine Marketing and SEO Tools</a></p>
</div>    
</body>
</html>

nizmotine · #5 Aug 13th, 2007, 00:51

hi, thank you so much, its worked really good, except that the headers of the column, havent keep the same formatting as the left column, is there an easy fix ?

thx again

nizmotine · #6 Aug 13th, 2007, 00:54

no need, i figured that out myself, woo.

I just copied and pasted the css style from the left column, and renamed them to include "right" in their name

Lchad · #7 Aug 13th, 2007, 01:38

It's all about the "details" isn't it!! Good for you for figuring that out!

nizmotine · #8 Aug 13th, 2007, 12:28

Quote:

Originally Posted by nizmotine

Hi guys,

Im also having a problem with this happening. (Its part of the redesign website)

Shot at 2007-08-12

This is probably noobish mistakes, but I have used a table to put the banners in, and the table is in what i think a CSS - P element, but still the below columns still want to move up towards the navigation bar and then cover it !.

I still seem to have this issue..

any idea's ?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange gap on left of H2 tag	philiph	Web Page Design	4	Jul 17th, 2007 08:06
fixed left column and variable right	obiron	Web Page Design	4	May 3rd, 2007 18:34
<hr /> and clear:left	Krakatoa	Web Page Design	5	Dec 22nd, 2005 11:34
..copy data from column A in Table A to column B in Table B?	gecastill	Databases	10	Jun 23rd, 2005 18:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How can I add in a 3rd column in on the right like the one on the left ?