Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 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; 04-09-2009 at 12:09 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    plattenumdesign (04-09-2009)

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hello again Excavator

    does this look about right?

    http://plattenumdesigns.com/index2.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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


  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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;
    float: left;
    	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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    wow! thanks alot lol your a Pro when it comes to CSS and HTML.

    it is fixed now, thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •