Available Width vs 100% Width, with Max-Width

##What is Available Width?

Available width is the Freeway term for what we used to call undefined width. In code terms, it produces no defined width value for an html item. In inflow layouts, this setting will cause an html item to expand to fill the available width of its container.

##What is Percentage Width?

Freeway also allows the user to set an html item’s width as a percentage of its parent container’s width. A width setting of 100% will cause an html item to also expand to fill the available width of its container.

##What’s the difference between Available Width and 100% Width?

In the normal document flow, there is no difference. An item of undefined width and an item of defined width:100% would both expand to fill the available width of their respective containers. The only difference I can imagine (but have not tested) might be in the case of floats where such items would be removed from the normal document flow and behavior.

##So what is the squabble?

I have no idea.

width:100%; max-width:600px; 

is effectively the same thing as…

max-width:600px;

on an item with no width setting (available width). Every browser produces the same result and they are both backwards-compatible as far as I can see.

Max-width is not a width setting, but a width limiter-- it only applies to flexible width items, not fixed dimension items, and only sets an upper limit for these items to expand to. The setting for this can be found in the Dimension Pane of Freeway’s Inspector.


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

The difference between available and 100% width really comes into play when you have applied padding to the element. Then 100% becomes 100% + ( 2 x padding ). Leaving width undefined and adding padding will result in exactly what you expect – a full-width block with the contents spaced an attractive distance from the edges. Of course, if you use the box-sizing: border-box hack, then there’s no difference again…

Walter


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

I had to learn this afternoon, that available basically has to work as we are used to have in Freeway6.

Freeway spoken, no width declared is (as Walter already pointed out) the coolest feature under the inflow-sun. This is just because box-sizing requires action - or extended adjustment of the padding-reduced width(s).

Another aspect (which is redundant but interesting):

No width - one line less on style-sheet. Summed up on items each page, pages each project, projects in wwweb … part of responsible design, perhaps?

No width on ID furthermore allows to hook width by class and/or js without !important if necessary.

Not aware of possible downsides or conflicts - can’t see one.

Cheers

Thomas


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