SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to stick the boxes togather ?

    Hi,

    I am working on a simple design but I am not able to get it. Please see my code. How to make the 5th box's top go near the 1st box's bottom ?

    HTML Code:
    <html>
    <head>
    	<title>Grid</title>
    	<style>
    	#content { width:1188px; }
    	.box { margin: 5px; padding: 5px; background: #e0dfdd; font-size: 11px; float: left;}
    	.col1 { width: 230px; }	
    	</style>
    </head>
    
    <body>
    
    <div id="content">
    	<div class="box col1"><p>1 - Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>2 - Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>3 - Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>4 - Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>5 - Lorem ipsum dolor sit amet</p></div>
    </div>
    
    </body>
    </html>
    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tapan View Post
    How to make the 5th box's top go near the 1st box's bottom ?
    You could try giving it a class of "dog".

    But seriously, you can't do that, I'm afraid, unless you are willing to create a column (a wrapping div) that contains the first and fifth divs.

    You can also do this with JavaScript, I believe, but I'm not sure that's worth it.

    A compromise might be to give each box the same height with display: table-cell.

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have seen several websites doing it. They call them the "grid design".

    Thanks.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Grid design, yes, but moving that 5th box up to touch the first is in the realm of JS, unless you ware willing to create div columns.

  5. #5
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can I have an example ?

    Thanks.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    An example of the extra div would be this:

    Code:
    <!DOCTYPE html>
    <head>
    	<title>Grid</title>
    	<style>
    	#content { width:1188px; }
    	.box { margin: 5px; padding: 5px;float: left; background: #e0dfdd; font-size: 11px;}
    	.col1, .col-wrap { width: 230px; }	
    	.col-wrap {float: left; margin-right: 20px;}
    	</style>
    </head>
    
    <body>
    
    <div id="content">
      <div class="col-wrap">
    	<div class="box col1"><p>1 - Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>5 - Lorem ipsum dolor sit amet</p></div>
      </div>
    	<div class="box col1"><p>2 - Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>3 - Lorem ipsum dolor sit amet</p></div>
    	<div class="box col1"><p>4 - Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p></div>
    	
    </div>
    
    </body>
    </html>
    I'll leave it to someone else to suggest a JS solution.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tapan View Post
    I have seen several websites doing it. They call them the "grid design".
    One of the easiest ways to achieve the same outcome is to change the order of the code. If you start with a wrapper containing (1 and 5) and then 2 and 3 and 4 then it's much easier to get the same effect.

  8. #8
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This is just the example I gave. The design which I saw had two boxes joined to make one big box and that could also come anywhere below the 2 small boxes or above 2 small boxes. ralph.m must be correct, it must be done using JS or some algo.

    Thanks.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Here are two jQuery scripts that do what you want:

    http://masonry.desandro.com/
    http://www.wookmark.com/jquery-plugin

  10. #10
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Wow, excellent find.

    Thanks.


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
  •