 alien9999999Your Head Looks NicePremium
join:2002-05-21
B-3000 | 2 vertical synchronized lists (liquid design)I'm looking at the following:
<div class="results">
<div class="results_wrapper">
<div class="results_left">
<div class="item"><span class="result_value">example 1</span></div>
<div class="item"><span class="result_value">example 2: extremely long value here making this break over 2 lines...</span></div>
<div class="item"><span class="result_value">example 3</span></div>
<div class="item"><span class="result_value">example 4 is a bit longer.</span></div>
</div>
<div class="results_right">
<div class="item"><span class="result_subvalue">value 1</span><div class="clear-twoblocks"></div></div>
<div class="item"><span class="result_subvalue">value2</span><div class="clear-twoblocks"></div></div>
<div class="item"><span class="result_subvalue">example 3 is here the longest one, possibly resulting in 2 lines or more...</span><div class="clear-twoblocks"></div></div>
<div class="item"><span class="result_subvalue">example 4</span><div class="clear-twoblocks"></div></div>
</div>
<div class="clear-block"></div>
</div>
</div>
.clear-block { clear: both; }
.results_left { float: left; }
.results_right { float: left; }
.results_left .item { clear: both; }
.clear-twoblocks { clear: left; }
the idea is that the results_left div is as small as it should be (liquidly) and that the results_right is next to it.
when the data can be on 1 line, it works fine. but when the left or the right takes up 2 lines, it starts to give problems, it isn't aligned properly anymore.
The idea is to have a list of data which has a key and a value. So that the left side is aligned left and the right side is also aligned left, but it should start at the same X-position (but still as left as possible liquidly).
The alignment is the problem of course, i want the left and the right on the same starting line (no matter what) and the right side to start at the same X-position. but i can't use pixels because the one list has small keys and large values and another one has large keys and small values...
anyone any idea?
--
Alien is my name and headbiting is my game. |
|
|
|
 geekamongusReal Slump QualityPremium,MVM
join:2004-07-27
Asheville, NC | Seems like a good time to use a table. |
|
 JAAuldeWeb DeveloperPremium,MVM
join:2001-05-09
Hagerstown, MD
kudos:3 | said by geekamongus:Seems like a good time to use a table. Agreed. Moving away from tables is good, unless you're working with tabular data. |
|
 twizlarI dont think so.Premium
join:2003-12-24
Brantford, ON
kudos:3 | said by JAAulde:said by geekamongus:Seems like a good time to use a table. Agreed. Moving away from tables is good, unless you're working with tabular data. +1
--
Broadline Networks Inc. |
|
alien9999999Your Head Looks NicePremium
join:2002-05-21
B-3000 | I understand your sentiments, however; we ABSOLUTELY NEED blind-surfing certification.
--
Alien is my name and headbiting is my game. |
|
JAAuldeWeb DeveloperPremium,MVM
join:2001-05-09
Hagerstown, MD
kudos:3 | said by alien9999999:I understand your sentiments, however; we ABSOLUTELY NEED blind-surfing certification. I don't even know what that means. If you mean you need to be accessible to the blind, a table has nothing to do with that when used properly, as this would be. Tables are for tabular data. |
|
geekamongusReal Slump QualityPremium,MVM
join:2004-07-27
Asheville, NC
1 edit | reply to alien9999999
If you are referring to accessibility, this article shows you how to construct accessible tables, which should keep you within the realm of Section 508 or whatever accessibility test you are seeking to pass.
»jimthatcher.com/webcourse9.htm |
|
