4 evenly spaced DIVs

[Gonjiness]

I am building a site based on Paul O’Brian’s 3 column layout. I want to have four DIVs in the centre column. These boxes are supposed to act as a navigation menu, but I can’t get the DIVs to spread evenly across the bottom of the page.

For an example of what I mean, look at the page www.fcg.com.

I want four DIVs to look the same, but still be fluid (resize when the page resizes) but when I specify 24% width with 5px padding, the page is fluid at higher resolutions (1600 x 1200), but at smaller resolutions (800 x 600) the rightmost DIV always gets pushed to the next row, ruining the spacing of all the DIVs.

Can anyone tell me how to specify the width of these DIVs so that they are centred and evenly spaced and in the middle column?

[Paul O'B]

Hi,

I want four DIVs to look the same, but still be fluid (resize when the page resizes) but when I specify 24% width with 5px padding,

You can't specify percentages and padding and expect them to add up. You could set 4 elements at 25% (or 24.8% to take into account rounding errors) and then apply padding and borders on inner elements.

Of cousre this still depends on the content inside being fluid enough not to cause droppping of the floats.

.column {width:24.8%;float:left}
.innercolumn {padding:5px;}
.innercolumn2 {border:1px solid red;background:#ffffcc;min-height:250px;}
* html .innercolumn2 {height:250px}

html:

  <div id="centrecontent"> 
	<!--centre content goes here -->
	<div class="column"> 
	  <div class="innercolumn"> 
		<div class="innercolumn2"> 
		  <p>This is the content : This is the content</p>
		</div>
	  </div>
	</div>
	  <div class="column"> 
	  <div class="innercolumn"> 
		<div class="innercolumn2"> 
		  <p>This is the content : This is the content</p>
		</div>
	  </div>
	</div>
	<div class="column"> 
	  <div class="innercolumn"> 
		<div class="innercolumn2"> 
		  <p>This is the content : This is the content</p>
		</div>
	  </div>
	</div>
	<div class="column"> 
	  <div class="innercolumn"> 
		<div class="innercolumn2"> 
		  <p>This is the content : This is the content</p>
		</div>
	  </div>
	</div>
  </div>
  <div id="clearfooter"></div>
  <!-- to clear footer -->
</div>

If of course the layout is critical that it doesn't break then you may have to resort to a small table to hold the 4 divs. Otherwise the above should work ok.

Paul