I need a way in HTML/CSS with code only, without javascript or images, to make a sidebar and a content to follow each other, so if I write more text in the sidebar the content's height will be equal to the sidebar's height but the text in the content will remain on the top of the content part and inverse too.
+1
A:
The only real way of doing this in a cross browser fashion is with tables.
As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with css.
<style>
#sideBar { vertical-align:top;}
#contentArea { vertical-align:top;}
</style>
<table>
<tr>
<td id="sideBar">SideBar</td>
<td id="contentArea">content area</td>
</tr>
</table>
Chris Lively
2010-07-07 13:17:14
Yes I know this too, but for example when I write more content on the sidebar the content part will be on the middle of the page, I mean in the middle of the sidebar. Or I'm doing something wrong?
CIRK
2010-07-07 13:18:42
try <td valign="top">
slf
2010-07-07 13:20:28
See the update. if you apply a vertical-align: top to the cells, then the content will align to the top of the cell.
Chris Lively
2010-07-07 13:20:51
Don't do this. Tables are for tabular data, not layouting.
You
2010-07-07 13:21:22
use style="vertical-align:top" for every <td>
Dobiatowski
2010-07-07 13:21:23
Hmm I will try it :)
CIRK
2010-07-07 13:23:53
@You: religious adherence to dogma results in pain for everyone. And tables were indeed meant for layout when they were first introduced. You might want to check this out: http://www.barrypearson.co.uk/articles/layout_tables/history.htm
Chris Lively
2010-07-07 13:24:47
I don't have any problem with tables, if you check out twitters layout you will see that they are using tables too to reach the same effect.
CIRK
2010-07-07 13:26:34
Ok thanks very much! 'Vertical-align:top' works cool! I used this table layout before, but the the content in the middle was not good so now works cool thanks again!
CIRK
2010-07-07 13:52:47
@Cirk: Glad to hear it solved your problem!
Chris Lively
2010-07-07 16:28:21
A:
You can do it without javascript: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
slavalle
2010-07-07 13:20:07
Yeah, 20 times the amount of html / style code and a guarantee that you'll be working on just this part for days trying to figure out why it doesn't work in some of the browsers when a table tag was built for exactly this problem...
Chris Lively
2010-07-07 13:22:12
This is suboptimal because it involves unnecessary nested `<div>` elements and some pretty ugly CSS tricks, but it's better than Chis' table-based solution.
You
2010-07-07 13:23:33
@Chris: The `<table>` **element** was not built to solve this problem. It was built to display tabular data.
You
2010-07-07 13:24:36
@You: citation please? Mine is: http://www.barrypearson.co.uk/articles/layout_tables/history.htm
Chris Lively
2010-07-07 13:25:31
@You: like this one on w3.org which supports tables for layout: http://www.w3.org/TR/WD-tables-960123 says "The HTML table model has evolved from studies of existing SGML tables models, the treatment of tables in common word processing packages, and looking at a wide range of tabular layout in magazines, books and other paper-based documents. ... This feature has been very important to the success of HTML to date. "
Chris Lively
2010-07-07 13:38:32
Are HTML tables bad because they break separation of concerns? Or is it because of security? I get confused.
David Lively
2010-07-07 15:38:32
+1
A:
This excellent article on A List Apart builds such a layout from scratch, and also contains some interesting links to other articles on the subject, such as Faux Columns (also on ALA).
You
2010-07-07 13:27:21