SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    listing divs in two columns

    hello,

    I've toiled over this for quite some time now. Basically I want to be able to list my tutorial div blocks on the following page:

    http://www.z1p.net/test_ashheadlines.php

    like this:

    http://www.solardreamstudios.com/learn/

    See how he lists his side by side? I've tried to incorperate his methods on my site, but it doesn't seem to be helping. Any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just float them side by side.

    Code:
    		<div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1"><a href="/test_ashheadlines.php?page=full&id=27"> 
    			  <img src="http://www.zerooneproductions.net/ne...tutbutton2.gif" alt="" /> 
    			  </a></div>
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=27"> 
    			 <strong>Tutorial number four </strong></a><br />
    			  How to post title text and make it actually work for once in my 
    			 life. </div>
    			 <div class="clear"></div>
    	</div>
    		</div>
    		
      <div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1">
       <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <img src="http://www.zerooneproductions.net/ne.../tutbutton.gif" alt="" /> 
    			  </a></div> 
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <strong>Tutorial number 3</strong> </a> <br />
    			  editing the text of tutorial number 3 </div>
    			<div class="clear"></div>
    		  </div>
    		</div>
    		
    	  <div class="clear"></div>
    		
      <div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1">
       <a href="/test_ashheadlines.php?page=full&id=24"> 
    			  <img  src="http://www.zerooneproductions.net/ne...tutbutton2.gif" alt="" /> 
    			  </a> </div>
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=24"> 
    			  <strong>The second tutorial</strong> </a> <br />
    			  Listing yet another tutorial. Untill I get the titletext working. 
    			</div>
    		  </div>
    		</div>
      
    	<div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1">
       <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <img src="http://www.zerooneproductions.net/ne.../tutbutton.gif" alt="" /> 
    			  </a></div> 
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <strong>Tutorial number 3</strong> </a> <br />
    			  editing the text of tutorial number 3 </div>
    			<div class="clear"></div>
    		  </div>
    		</div>
    		
    	  <div class="clear"></div>
    Code:
    .col1{ 
     position:relative; 
     border: 0px; 
     float:left; 
     width:40px;
     height:40px;
    }
    .twocolcontainer { 
     width: 180px; 
     position: relative;
     margin-left: 10px;
     margin-top:10px;
     float:left;
     display:inline;/* ie double margin fix*/
    }
    .twocolcontainerborder {border:1px solid blue;}
    .twocolcontainerborder img {border:0px;}
    .col2 { margin-left:50px;}
    Paul

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm. getting closer, but with strange results.... :

    http://www.z1p.net/test_ashheadlines.php

    And for some reason the search form div is not clearing..

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Only col1 needs to be floated.

    Code:
    .col1{ 
     position:relative; 
     border: 0px; 
     float:left; 
    }
    .twocolcontainer { 
     width: 180px; 
     position: relative;
     margin-left: 10px;
     margin-top:10px;
     float:left;
     display:inline;/* ie double margin fix*/
    }
    .twocolcontainerborder {
     border:0px solid blue;
    }
    .twocolcontainerborder img {border:0px;}
    .col1 {
      position:relative; 
      border: 0px; 
      float:left; 
      width:40px;
      height:40px;
     }
    
    .col2 { margin-left:50px;}
    .searchbox {margin-left: 70px;}
    You need to ad the clearer after every second tutorial as in my code above:
    Code:
    		<div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1"> <a href="/test_ashheadlines.php?page=full&id=27"> 
    			  <img src="http://www.zerooneproductions.net/ne...tutbutton2.gif" alt="" /> 
    			  </a> </div>
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=27"> 
    			  <strong>Tutorial number four</strong> </a> <br />
    			  How to post title text and make it actually work for once in my 
    			  life. </div>
    			<div class="clear"></div>
    		  </div>
    		</div>
    		<div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1"> <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <img src="http://www.zerooneproductions.net/ne.../tutbutton.gif" alt="" /> 
    			  </a> </div>
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=26"> 
    			  <strong>Tutorial number 3</strong> </a> <br />
    			  editing the text of tutorial number 3 </div>
    			<div class="clear"></div>
    		  </div>
    		</div>
    	   
    	<div class="clear"></div>
      
      <div class="twocolcontainer"> 
    		  <div class="twocolcontainerborder"> 
    			<div class="col1"> <a href="/test_ashheadlines.php?page=full&id=24"> 
    			  <img src="http://www.zerooneproductions.net/ne...tutbutton2.gif" alt="" /> 
    			  </a> </div>
    			<div class="col2"> <a href="/test_ashheadlines.php?page=full&id=24"> 
    			  <strong>The second tutorial</strong> </a> <br />
    			  Listing yet another tutorial. Untill I get the titletext working. 
    			</div>
    			<div class="clear"></div>
    		  </div>
    		</div>
    		 <div class="clear"></div>
      <br />
    		<p align="center"><a href="/test_ashheadlines.php?page=archives">Archives</a></p>
    You want to clear both floats so that the next row of floats float starts on a new line and not under, or beside one of the other floats (depending on their size).

    I have this working fine locally so you should be able to make it work quite easily

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, then here's what my problem would be. every tutorial is dynamically generated (database driven) So I can't put a div clearer after every two...

    It seems to be working however, except the 2nd post is a little below the first.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You'll just have to make sure that you force all the floats to be the same height otherwise they will snag on each other as they wrap to the next line.

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Setting the height worked. Thanks again 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
  •