How to stick the boxes togather?

Get Started
1

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>
<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

You could try giving it a class of “dog”. :shifty:

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

Hi,

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

Thanks.

4

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

Hi,

Can I have an example ?

Thanks.

6

An example of the extra div would be this:

<!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. :slight_smile:

7

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

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

Here are two jQuery scripts that do what you want:

10

Hi,

Wow, excellent find.

Thanks.