PDA

View Full Version : 3 columns that adjust vertically depending on text inside



lifeisrisky
Feb 23rd, 2012, 12:52 PM
I have 3 columns set horizontally next to each other inside a wrapper. The length of the text inside each column can vary depending on what the end user types in. I would like each column and the wrapper to size vertically automatically depending on the length of the text. So if one column needs to be 300px high, the second 200px high, and the 3rd 400px high they will adjust automatically and the wrapper will become 450px high.

Not sure if I am explaining that right but here is the basic HTML


<div id="wrapper">
<div class="col"><p>This is filled with variable length text</p></div>
<div class="col"><p>This is filled with variable length text</p></div>
<div class="col"><p>This is filled with variable length text</p></div>
</div> <!-- end wrapper -->


I am very new to this and struggling so any assistance would be great. There are so many CSS resources out there I am getting confused trying to find the right answer to what I am sure is a simple problem.

abduraooft
Feb 23rd, 2012, 01:14 PM
Have a look at www.alistapart.com/articles/fauxcolumns

lifeisrisky
Feb 23rd, 2012, 08:19 PM
Have a look at www.alistapart.com/articles/fauxcolumns

Perfect solution. Thank you.