• quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Topic: 3 column layout help!

this is my style from my main.tpl
http://modelcrowd.com
but they are not lined up right!
Question is what did I do wrong?
I want a 3 column style

<style type="text/css">
       
   #container {
        width: 100%;
        float: right;
        margin-left: -180px;
    }

#left     {float:left; width: 180px;}

#right     {float:right; width: 180px;}

#main {margin-left:200px; margin-right:200px;}

    </style>
My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • Registered: 2006-06-29
  • Posts: 324

Re: 3 column layout help!

I believe you have to float them all the same direction...  at least I've never been able to do a css 3 column layout without them all being floated left.

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

ok i got it fixed except for a few css issue
the forum threat is not lined up
http://modelcrowd.com/viewtopic.php?id=1
and the gallery image also.
http://modelcrowd.com/gallery.php?pid=2
there got to be something that im doing wrong....

humm...

Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

4 Reply by guardian34 (edited by guardian34 2007-01-29 18:22)

  • Registered: 2006-06-05
  • Posts: 410

Re: 3 column layout help!

Try removing the clearer div after the breadcrumb links.

Edit: Any clearers besides the one above the footer?

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

no that didnt work....

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

6 Reply by MadHatter (edited by MadHatter 2007-01-29 21:07)

  • Registered: 2006-06-29
  • Posts: 324

Re: 3 column layout help!

your css is messed up... if you turn off your green css, it displays correctly.  I believe the clearer divs in the upper and lower link(st & sb) are causing the large gaps in the layout.


do yourself a huge favor (and anyone else trying to mess with css), download firefox2 and the firebug and web developer add ins.  it will allow you to inspect and change your page on the fly in your browser and is easy enough for me to use it (which is saying a child could too).

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

in what file?

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

8 Reply by MadHatter (edited by MadHatter 2007-01-29 21:11)

  • Registered: 2006-06-29
  • Posts: 324

Re: 3 column layout help!

dunno where the links are lined out at, probably main.tpl, but since I never really used punbb's templates much I wouldn't really know.

this is what it looks like with the green (or whatever main theme you're using) image link.

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

the clearer div was in the gallery.php, viewtopic and a few other files that i had to remove the <div class="clearer"></div> from and it now works in ie7 and FF

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • From: Tilburg, Netherlands
  • Registered: 2006-02-04
  • Posts: 322

Re: 3 column layout help!

i use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<pun_head>
<style type="text/css">
    #left {
        width: 140px;
        float: left;
    }
    #main {
        margin-left: 150px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -140px;
    }
</style>
</head>
<body>
<pun_include "header.inc.php">
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="container">
    <div id="main">
    
        <pun_announcement>
        
        <pun_mod>

        <pun_main>

        <pun_include "google_ads_middle.inc.php">
        
    </div>    
</div>
 
<div id="left">    
    <div class="block">
        <h2><span>Menu</span></h2>
        <div class="box">
        <pun_sidelinks>            
        </div>
    </div>
    
<pun_include "kierownik_menu.inc.php">

<pun_include "wie_is_er_online.inc.php">

<pun_include "top_posters.inc.php">

<pun_include "recenttopics.inc.php">

<pun_include "links.inc.php">
  
<pun_include "google_ads.inc.php">
    
</div>
</div>

<div class="clearer"></div>
 
<pun_footer>

</div>
</div>
<pun_include "footer.inc.php">
</body>
</html>

and it works for me

kierownik's Website

11 Reply by quaker

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

this is a 3 column not 2..
http://modelcrowd.com

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

12 Reply by kierownik (edited by kierownik 2007-01-29 21:30)

  • From: Tilburg, Netherlands
  • Registered: 2006-02-04
  • Posts: 322

Re: 3 column layout help!

did you see my site? it has three columns hmm

Oops wrong .tpl hmm

it had to be this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<pun_head>
<style type="text/css">
    #left {
        width: 140px;
        float: left;
    }    
    #right {
        width: 140px;
        float: right;
        margin-left: 0px;
    }
    #main {
        margin-left: 150px;
        margin-right: 150px;
    }
</style>
</head>
<body>
<pun_include "header.inc.php">
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="left">    
    <div class="block">
        <h2><span>Menu</span></h2>
        <div class="box">
          <pun_sidelinks>            
        </div>
    </div>
    
  <pun_include "kierownik_menu.inc.php">

  <pun_include "wie_is_er_online.inc.php">
  
  <pun_include "google_ads.inc.php">

    
   </div>
</div>

<div id="right">
    
  <pun_include "top_posters.inc.php">
  
  <pun_include "recenttopics.inc.php">
  
  <pun_include "random_quote.inc.php">

  <pun_include "links.inc.php">
  
</div>

    <div id="main">

        <pun_main>

        <pun_include "google_ads_middle.inc.php">
        
    </div>
 
<div class="clearer"></div>
 
<pun_footer>

</div>
</div>
<pun_include "footer.inc.php">
</body>
</html>

kierownik's Website

13 Reply by quaker

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

kewl... ill take a look at it... see how things are different.. but i use the frontpage mod so i got to clean up the css in the files.

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • From: Tilburg, Netherlands
  • Registered: 2006-02-04
  • Posts: 322

Re: 3 column layout help!

aha, i do not use the frontpage mod. i just followed the thing on the wiki on punres and it worked smile

kierownik's Website

15 Reply by quaker

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: 3 column layout help!

true.. but there so many mods that comes with frontpage mod..lol. that i dont have to install and hack the php files...haha

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • Registered: 2007-02-08
  • Posts: 24

Re: 3 column layout help!

I can warmly recommend this A List Apart article which has some nice tricks for multicolumn layouts, plus tons of references to other techniques.