|
|
Posted by Ben C on 12/22/06 07:56
On 2006-12-21, -Lost <spam_ninjaREMOVEME@REMOVEMEcomcast.net> wrote:
> "Ben C" <spamspam@spam.eggs> wrote in message
> news:slrneom348.bl7.spamspam@bowser.marioworld...
>> On 2006-12-21, dorayme <doraymeRidThis@optusnet.com.au> wrote:
>>> In article <slrneol90f.i37.spamspam@bowser.marioworld>,
>>> Ben C <spamspam@spam.eggs> wrote:
>>>
>>>> Well, I don't design a lot of websites, but it seems to me that
>>>> absolute positioning is better for this than floats.
>>>>
>>>> This way they'll always run right to the edge and never jump down:
>>>>
>>>> <style type="text/css">
>>>> div
>>>> {
>>>> position: absolute;
>>>> height: 600px;
>>>> }
>>>> #one
>>>> {
>>>> left: 0;
>>>> right: 66%;
>>>> background-color: red;
>>>> }
>>>> #two
>>>> {
>>>> left: 33%;
>>>> right: 33%;
>>>> background-color: green;
>>>> }
>>>> #three
>>>> {
>>>> left: 66%;
>>>> right: 0;
>>>> background-color: blue;
>>>> }
>>>> </style>
>>>
>>> Why the two dimensions, left and right? Would not left be good
>>> enough, at least for #one and #two?
>>
>> Not unless you also set width. If you set two out of the three (left,
>> width and right) the browser solves for the other one.
>>
>> Another quite useful thing about using left and right rather than width
>> is they're measured to the outside of the marginpaddingborders. So in
>> this example, if you just add to the div selector at the top:
>>
>> border: 10px solid black;
>> margin: 2em;
>>
>> All the divs get the border and margin and still spread evenly across
>> the page. This is hard to do with percentage-width floats, because you
>> can't say "33% - 10px" (and even if you could it would be annoying to
>> have to), so you have to guess, or nest divs with the borders and
>> margins inside the three undecorated 33%-wide floats.
>
> Say what? In what browser does that work? Your code (all of it)
> would create three *floating* DIVs. That is to say they do not reach
> from one side to the other.
Which code? The example HTML, or what you reconstruct from my
abbreviated description of the alternative using floats?
> In Internet Explorer 6 they are barely 30px wide. All positioned
> elements should have a width specified if I remember correctly.
Not necessarily, in many circumstances where leave the width as auto you
get the "shrink-to-fit" width (which you also get for floats with auto
width). Sometimes this is just what you want.
In any case, as demonstrated, you can set left and right but not width.
You may be right that some or all of this doesn't works in IE6, I don't
know, I haven't tried it.
Navigation:
[Reply to this message]
|