1

I try to create a 3 column page structure for my page. Each column has different independant content. What always happens with me is I need to position each element in each column individually.

Position of one element like button or div changes when content in another column changes. Do I have any bug in my code? I think I lack some standard rule to follow in my code.

Please see demo 1 here.

Here content of right and left column should remain on top of the column but it does not. Why?

After the content of middle column changes, it also affects the position of right and left column element. Why?

Demo 2 After content in middle column changes

How can I code so that content should be independant to changes in another columns?

display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
user123
  • 5,269
  • 16
  • 73
  • 121
  • 2
    Why, in the closing days of 2013, would you use tables for layout? Please don't, they're messy, non-semantic (unless it's tabular data you're presenting), bulky (in terms of file size) and painfully difficult to redesign when you update your site. – David Thomas Dec 01 '13 at 13:03
  • @DavidThomas I agree with you almost entirely. A website shouldn't be completely made out of tables, but in some cases tables are the best option. Hey, even facebook has a table in the login form ;) – display-name-is-missing Dec 01 '13 at 13:08
  • 2
    @DanielLisik Have a look at [this cult answer](http://stackoverflow.com/a/84986/2806497). – OlivierH Dec 01 '13 at 13:16
  • @Daniel: Facebook is successful, but I wouldn't consider it an exemplar of good practice. – David Thomas Dec 01 '13 at 13:35
  • @DavidThomas you're right. I didn't think about it that way. – display-name-is-missing Dec 01 '13 at 13:41
  • @DavidThomas: thanks for suggestion. But what you suggest in case if my site has three column structure? – user123 Dec 01 '13 at 15:51

2 Answers2

2

To make the content remain top, just add this in css:

td{vertical-align:top;}

http://codepen.io/anon/pen/mueEJ

Andrew
  • 5,290
  • 1
  • 19
  • 22
1

To achieve what you want, try adding this css code:

td { vertical-align:top; }

You could change the value top to bottom (if you would like the content to have the base at the bottom of the table), middle and many other values. You can read more about the different options here.

display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41