Hi anyOne.
Hi anyOne.
I'm working on a discussion board lay-out
and I'd like to make it table-less.
This is my rough draft:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>MyForum</title>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
style type="text/css">
* {
    
margin:0px;
    
padding:0px
}
body 
  
text-align:center
}

div#container {
    
margin0 auto;
    
width:920px;
    
text-align:left;
    
border:5px solid #666666; 
}
div#header { 
    
border-bottom:5px solid #666666; 
}
div#header h1 { 
    
line-height:80px;
}
div#content { 
    
}
div#footer { 
    
clear:both
    
border-top:5px solid #666666; 
}
div#footer p { 
    
line-height:50px;
}
h3.cat 
    
background-color:#999999;
    
color:#FFFFFF
}

div.subcontent 
    
float:left
    
border-top:5px solid #FFFFFF;
    
background-color:#CCCCCC;
    
background-image:url(http://www.blogial.net/images/separator.gif);
    
background-position:top left;
    
background-repeat:repeat-y;
}
div.subcat {
    
floatleft;
    
width400px
}
div.subcat p 
    
margin-left:5px
}
div.lastPost 
    
floatleft;
    
width:200px
}
div.threads 
    
floatleft;
    
width160px;
    
}
div.posts {
    
floatleft;
    
width160px
}
</
style>
</
head>
<
body>
<
div id="container">
    <
div id="header"><h1>HEADER</h1></div>
    <
div id="content">
        <
h3 class="cat">Category1</h3>
        <
div class="subcontent">
            <
div class="subcat"><p>Subcategory1 Link</p><p>Description</p></div>
            <
div class="lastPost"><p>Last Post Link</p><p>Author</p></div>
            <
div class="threads">5300</div>
            <
div class="posts">1210</div>
        </
div>
        <
div class="subcontent">
            <
div class="subcat"><p>Subcategory2 Link</p><p>Description</p></div>
            <
div class="lastPost"><p>Last Post Link</p><p>Author</p></div>
            <
div class="threads">5300</div>
            <
div class="posts">1210</div>
        </
div>
        <
h3 class="cat">Category2</h3>
        <
div class="subcontent">
            <
div class="subcat"><p>Subcategory1 Link</p><p>Description</p></div>
            <
div class="lastPost"><p>Last Post Link</p><p>Author</p></div>
            <
div class="threads">5300</div>
            <
div class="posts">1210</div>
        </
div>
        <
div class="subcontent">
            <
div class="subcat"><p>Subcategory2 Link</p><p>Description</p></div>
            <
div class="lastPost"><p>Last Post Link</p><p>Author</p></div>
            <
div class="threads">5300</div>
            <
div class="posts">1210</div>
        </
div>
    </
div>
    <
div id="footer"><p>FOOTER</p></div>
</
div>
</
body>
</
html
I hold all the floats giving float property
to the wrapper div.subcontent it works
quite well but I'm wondering if is there
a better way (I saw for instance using overflow property).
In this way I'm not able to put the last
border ;( to div.subcontent and set a property like
vertical-align:middle (I know in this case I can't
use it) to put div.threads and div.posts just in the
middle
Thanks in advance.
Let's take a look here
Bye and take care.