How do I lay out four sidy by side containers using CSS?

Question

So that when text (in those contianers) gets enlarged all is still well. Sort of forum: Topics, Replies, Views and Last post.

Answer 1

You can declare 4 div like these

.div1, .div2, .div3, .div4
{
float: left;
width: 25%;
}

so your divs would resize when page is resized and keep proportions between them.

Answer 2

If you want a margin in between the boxes what you can do is create a parent div then use negative margins to correct the left most div.

HTML

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.container {width:480px;float:left;margin-left:-20px} //float so that it wraps around children
.container div {width:100px;float:left;margin-left:20px;}

Answer 3

.row        { width:800px; }
 .row-box   { float:left; width:200px; }

<div class="row">
  <div class="row-box">Topics</div>
  <div class="row-box">Replies</div>
  <div class="row-box">Views</div>
  <div class="row-box">Last Post</div>
  <div class="clear"></div>
</div>