[Pro] Full width: Flexible vs Available

Following discussions on Full Width sites, I’ve noted that both Thomas and Caleb start with Page Align = None, then containers with widths at 100%. I’ve always done it a bit differently - using containers set to Available Width.

The results seem to be the same, but I am curious if there are any real differences?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Isn’t it, in real terms, just the difference between: (?)

margin-right:auto;
margin-left:auto;

or…
margin: 0 auto;

I haven’t tested what FW outputs but thats what I would guess at

On 6 May 2013 17:24, The Big Erns email@hidden wrote:

Following discussions on Full Width sites, I’ve noted that both Thomas and
Caleb start with Page Align = None, then containers with widths at
100%
. I’ve always done it a bit differently - using containers set to
Available Width.

The results seem to be the same, but I am curious if there are any real
differences?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The margin:auto property/value is actually for centering content – like
centering an inline element. No, I’m talking about a structure that would
stretch completely across the browser window area.

Before version 6, you clicked the width setting of a div to “un-define” it

  • my understanding that the FWP6 successor to that behavior is to set the
    div width to Available. What was added was also a setting for Fixed
    Percentages. Now both Caleb and Thomas recommend that setting for Full
    Width elements – and it’s perfectly fine, it works – as does the older
    Available Width setting. My question is more along the line of what is the
    difference, if any? Is there a best practice when it comes to this, or not?


Ernie Simpson

On Mon, May 6, 2013 at 12:32 PM, Glyn Winter email@hiddenwrote:

Isn’t it, in real terms, just the difference between: (?)

margin-right:auto;
margin-left:auto;

or…
margin: 0 auto;

I haven’t tested what FW outputs but thats what I would guess at

On 6 May 2013 17:24, The Big Erns email@hidden wrote:

Following discussions on Full Width sites, I’ve noted that both Thomas
and
Caleb start with Page Align = None, then containers with widths at
100%
. I’ve always done it a bit differently - using containers set to
Available Width.

The results seem to be the same, but I am curious if there are any real
differences?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

the difference is (for me), that the inspector setting of “available” removes the property of width (and height) from a div.

So for the very first div it indeed doesn’t matter, however it is confusing me to have a 100%, but Freeway is displaying something like 98000% in the inspector’s width field.

I maybe start the way you describe for only one reason:

I never had an “available” width setting in the past - and I maybe never will start to deal with it (width-spoken).

For the height it is a bit different:

The available is substituting the “do you want to set the height to be undefined” automatism of the past. So if there is a child-item, I set the parent div to available.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I was in part referencing just that, centering a block vs inline
element in relation to the setting (or not) of parent width and how that
affects alignment - the workaround being margin: 0 auto as opposed to
margin-right: auto etc

On 6 May 2013 18:32, Thomas Kimmich email@hidden wrote:

the difference is (for me), that the inspector setting of “available”
removes the property of width (and height) from a div.

So for the very first div it indeed doesn’t matter, however it is
confusing me to have a 100%, but Freeway is displaying something like
98000% in the inspector’s width field.

I maybe start the way you describe for only one reason:

I never had an “available” width setting in the past - and I maybe never
will start to deal with it (width-spoken).

For the height it is a bit different:

The available is substituting the “do you want to set the height to be
undefined” automatism of the past. So if there is a child-item, I set the
parent div to available.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie,

The main difference is that an undefined width on a relative or static positioned element (i.e. an inflow in Freeway) will always stretch to fill the available space within its parent, regardless of any margins on the element itself. If there is a margin applied to the element then the width of the element plus the margins will be equal to the available width of the parent item.

A defined width of 100% will always be 100% of the width of the parent. If the element has a margin, a smaller width will need to be used (calculated) for it to fit within the parent. Left margin plus 100% of the width of the parent plus right margin will always be greater than the width of the parent item. You can resolve this by using padding on the parent instead of margin on the element, or setting the element’s box-sizing property to border-box (as opposed to the default padding-box). The latter isn’t supported in all browsers.

The browser will treat both cases identically as long as the element has no margin. I would say the best practice would probably be to use available width - just in case you want to add a margin to the element in the future or do some live testing in the web inspector without having to change the width of the element as you work.

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options