Web Analytics Made Easy -
StatCounter Having troubles with 3 columns - CodingForum

Announcement

Collapse
No announcement yet.

Having troubles with 3 columns

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Having troubles with 3 columns

    im tryin to put my ads on the right and my sidebar on the left but everytime i do it shows up like this

    http://plattenumdesigns.com/index2.html

    it is right above my ads "Sidebar 2" is what it says.

    ive tried moving my div id but it throws everything off.

    i want it to be like this

    [SIDEBAR] [MAIN CONTENT] [ADS]
    [SIDEBAR] [MAIN CONTENT [ADS]
    [SIDEBAR] [MAIN CONTENT] [ADS]
    [SIDEBAR] [MAIN CONTENT] [ADS]
    [ FOOTER FOOTER FOOTER FOOTER ]

    Could somebody help me out with this problem i am having.

    here is the link once again
    http://plattenumdesigns.com/index2.html
    Last edited by plattenumdesign; Apr 8, 2009, 07:09 PM.

  • #2
    Hello again plattenumdesign,
    Your box model is off, as well as the order of your floats. Try this -
    CSS
    Code:
    body, html {
        color:#000;
    background-color:#CCCCCC;
    width:998px;
    margin:12px;
    }
    * {
        margin:0;
        padding:0;
    }
    #wrap {
        background:#CCCCCC;
        margin:0 auto;
        width:998px;
        }
    #sidebar2 {
        background:#ffffff;
        float:left;
        width:120px;
        }
    #sidebar {
        background:#ffffff;
        float:right;
        width:120px;
        }
    #main {
        width:758px;
    margin: 0 auto;
    	background-color:#FFFFFF;
    	text-align:center;
    	
        }
    markup
    Code:
    <!-- BEGIN WRAPPER-->
    <div id="wrap">
    
    <!-- BEGIN HEADER-->
    <div id="header">
    
    <!-- END HEADER-->
    
    </div>
    
    <ul id="nav">
    <li><a href="index.html" class="H">HOME</a></li>
    <li><a href="portfolio.html" class="P">PORTFOLIO</a></li>
    <li><a href="portfolio.html" class="L">LAYOUTS</a></li>
    <li><a href="portfolio.html" class="T">TEMPLATES</a></li>
    <li><a href="portfolio.html" class="F">FREEBIES</a></li>
    <li><a href="portfolio.html" class="C">CONTACT ME</a></li>
    </ul>
    </div>
    <div id="sidebar2">
    Side bar
    </div>
    <div id="sidebar">
    <!-- Begin: AdBrite, Generated: 2009-04-08 14:33:50  -->
    <script type="text/javascript">
    var AdBrite_Title_Color = 'FFFFFF';
    var AdBrite_Text_Color = 'E6E6E6';
    var AdBrite_Background_Color = '000000';
    var AdBrite_Border_Color = '000000';
    var AdBrite_URL_Color = 'FFFFFF';
    try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
    </script>
    <script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=976736&zs=3132305f363030&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script><script src="http://ads.adbrite.com/mb/text_group.php?sid=976736&amp;zs=3132305f363030&amp;ifr=1&amp;ref=http%3A%2F%2Fwww.plattenumdesigns.com%2Findex2.html" type="text/javascript"></script>
    <div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=976736&amp;afsid=1" style="font-weight: bold; font-family: Arial; font-size: 13px;">Your Ad Here</a></div>
    <!-- End: AdBrite -->
    
    
    
    
    
    
    </div>
    <div id="main">
    <p>
    
    MAIN<br>
    MAIN
    MAIN
    MAIN<br>
    MAIN
    </p>
    </div>
    
    
    <div id="footer">
    WEBSITE DESIGNED AND CODED BY PLATTENUMDESIGNS.COM © 2009 
    </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      hello again Excavator

      does this look about right?

      http://plattenumdesigns.com/index2.html

      Comment


      • #4
        Seems to work fine here, I checked in FF3 and added text to each of the 3 columns and it behaves like it should.
        Didn't check any of the IE's.
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          Originally posted by Excavator View Post
          Seems to work fine here, I checked in FF3 and added text to each of the 3 columns and it behaves like it should.
          Didn't check any of the IE's.


          ok, well i will check that out also,

          thanks alot for all the help lol you have helped me out alot!

          really appreciate your help.

          Comment


          • #6
            the only thing that is wrong and i cant figure out is the Main container is out of position in IE ive tried a couple ways of fixing it but nothing has worked.


            http://www.plattenumdesigns.com/index2.html
            here is the image from IE

            Comment


            • #7
              Sorry I didn't look at that in IE6 plattenumdesign. Looks like the IE6 double margin bug but not quite.
              Just have to approach it a little differently. Does it work if you make your CSS look like this? -
              Code:
              	
              #main {
                  width:818px;
              [COLOR="Red"]float: left;[/COLOR]
              	background-color:#FFFFFF;
              	text-align:center;
              	
                  }
              Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
              Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

              Comment


              • #8
                wow! thanks alot lol your a Pro when it comes to CSS and HTML.

                it is fixed now, thanks for your help

                Comment

                Working...
                X