SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Gonjiness's Avatar
    Join Date
    Sep 2003
    Location
    Regina, SK, Canada
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 evenly spaced DIVs

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.




    Code:
    .column {width:24.8%;float:left}
    .innercolumn {padding:5px;}
    .innercolumn2 {border:1px solid red;background:#ffffcc;min-height:250px;}
    * html .innercolumn2 {height:250px}
    html:
    Code:
      <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •