How to stick the boxes togather ?

**Tapan** · Dec 1, 2012 11:45

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.

**ralph.m** · Dec 1, 2012 17:20

Originally Posted by Tapan

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.

**Tapan** · Dec 3, 2012 03:34

Hi,

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

Thanks.

**ralph.m** · Dec 3, 2012 03:37

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.

**Tapan** · Dec 3, 2012 03:39

Hi,

Can I have an example ?

Thanks.

**ralph.m** · Dec 3, 2012 03:45

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.

**Stevie D** · Dec 3, 2012 06:25

Originally Posted by Tapan

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.

**Tapan** · Dec 3, 2012 07:03

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.

**ralph.m** · Dec 3, 2012 07:15

Here are two jQuery scripts that do what you want:

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

**Tapan** · Dec 3, 2012 07:32

Hi,

Wow, excellent find.

Thanks.

User Tag List

Thread: How to stick the boxes togather ?

Thread Tools

Display

How to stick the boxes togather ?

Bookmarks

Bookmarks

Posting Permissions