|
|
Posted by -Lost on 12/21/06 23:46
"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.
In Internet Explorer 6 they are barely 30px wide. All positioned elements should have a
width specified if I remember correctly.
-Lost
Navigation:
[Reply to this message]
|