[TimD]

I am having a few issues with the layout of a clients website. I have a three column grid and what I want to do is switch between different column combos, stacked down the page. The problem I have is that the far right column always creeps up to the bottom of the div above it. I've tried heaps of round-about methods but nothings working. I must be missing something painfully obvious.

To give you a better understanding of what I am talking about, here are some images;

Heres the Current layout:
www.timdonaldson.com/random/as_is.jpg
And Here is the grid I want:
www.timdonaldson.com/random/if_only.jpg



I hope there is a simple solution to this. Thanks in advance for any help.

[bocaj]

Have you got some markup for us to look at?

Something like this should work for the html markup, obviously class names will probably be different for you. And depending on what comes below, you might need to wrap the paragraphs into a div. Also the whole thing should be wrapped in a container of some sorts, i didn't include that because the head sections not included in this markup, but it should bind the page together.

<div id="top">
  <img src="#" alt="#" class="main-image" />
  <p class="main-intro">
	  Lipsum...
  </p>
</div>
<hr />
<p class="third">
  First column
</p>
<p class="third">
  Second column
</p>
<p class="third">
  Third column
</p>

For the css make sure all columns are floated, and you may need to clear #top but i shouldn't think it necessary.

[TimD]

Heres What I have been using. Most notably I am using div class instead of p class so I guess that is my main problem? At first glance I thought adding a <hr /> between paragraphs/'content sections' would be the fix but it didn't sadly.

All the columns are floated right btw.

	  <div class="content_Sections">
		<div class="three_colum_div">
		  Lipsum...
			</div>
		<div class="wide_column_left"></div>
	  </div>
	  
	  <div class="content_Sections">
		<div class="rule"></div>
		<div class="three_colum_div">
		  Lipsum...
			</div>
		<div class="three_colum_div_center">
		  Lipsum...
		</div>
		<div class="three_colum_div">
		  Lipsum...
		</div>
	  </div>

[TimD]

aaah, I've finnaly got that bit of code working. What do I do to stack another set of columns below these two? I've tried repeating the same method but its not working.

Thanks for the help to so far!