• Registered: 2006-02-20
  • Posts: 12

Topic: Two collumns tpl file, css powered

hello,

thank you for your support.

here is the "body part" of the main.tpl file i use :

<body>

<div id="main">

    <div id="punwrap">
        <div id="pun<pun_page>" class="pun">

            <div id="summary">
                <pun_include "summary.php">
            </div>

            <div id="content">
                <pun_announcement>
    
                <pun_main>

                <pun_footer>
            </div>

        </div>
    </div>

</div>

</body>

here are the css elements :

#main
{
margin-left : auto;
margin-right : auto;
}

#summary
{
float: left;
width : 15%;
\width : 15%;
w\idth : 15%;
}

#content
{
margin-left: 15%
}

this :
\width : 15%;
w\idth : 15%;
i don't understand, it was generated by an online css layout generator.

anyway,
1) the summary and the content <div> can't align horizontally ...
2) when i use :

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

the 'block' extends to the bottom of the "summary" <div>.

any idea please ?

PunsCMS : Make PunBB to be a serious Blog or CMS.
PunsCMS : Unleash Pun's CMS Power

2 Reply by Elzar

  • Elzar
  • Senior Member
  • Offline
  • Registered: 2005-07-16
  • Posts: 309

Re: Two collumns tpl file, css powered

The #content also needs floating, and the /width etc isn't needed. Try this one from PunRes:

http://www.punres.org/doku.php?id=tutor … _a_sidebar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<div id="container">
    <div id="main">
    
        <pun_announcement>
    
        <pun_main>
        
    </div>    
</div>

<div id="left">    
    <div class="block">
        <pun_include "summary.php">
    </div>
</div>

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

<pun_footer>

</div>
</div>

</body>
</html>
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }