On Dec 22, 2007 2:59 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > Jeroen wrote: > > <http://test.intellit.nl/test.html>. > > > > How does the aligning of the floats work? > > Floats go as high as they can, but not higher - unless you pull them up. > So, floats always align vertically with their top edge or margin in line > with whatever element they line up against. > With 2 floats side by side, their top edges/margins should be at the > same vertical line.
First of all, thanks again for taking the time to teach me (and others). Very much appreciated. But with the above, That was actually what I would have expected however in reality it doesn't seem to work. See this screen shots: <http://test.intellit.nl/align1.png> the right float has 10px smaller font size. <http://test.intellit.nl/align2.png> the right float has same font size as left. Any clues? #details { padding:10px; height: 1%; /* hasLayout */ } #title-heading { /* Left float */ text-align: right; color: black; float: left; width: 50%; font-size: 20px; font-weight: normal; padding-bottom: 10px; } #title-date { /* Right float */ text-align: left; color: #666; float: left; width: 50%; font-size: 20px; font-weight: normal; padding-bottom: 10px; } > Text-alignment in any one of those floats has no relations to text in > the other float or other elements, and will only be affected by whatever > font-size, line-height etc that's declared on itself and its own float. Exactly what I would have expected. > No problem getting whatever text line-up you want - static or > dynamically, but it won't work well as long as you apply absolute units > for font-size, line-height and vertical paddings and/or margins. > Reliable vertical alignment of a float based on the size of its > text-content - a kind of baseline alignment, requires well-calculated > use of relative units. Is this what's the problem in this case then? According to the first part it should always align on the top. So I'm a bit confused. -- Jeroen ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
