As I have tried to say before, I do not know what you intended to achieve, just that you were unhappy with what you had achieved.
Here’s an explanation of what http://www.reenoserve.com/newsiteworking/ is doing. (For our purposes, let’s agree that an html item in Freeway Pro is the same as an html div in page code)
The Freeway Pro page is indeed set to page align none, as can be seen in how FWP creates the automatic root html item - aka, PageDiv:
<div id="PageDiv" style="position:relative; min-height:100%">
So this Mother of All Divs is free to be as wide and tall as the browser window, and unless specified otherwise, so are all of its children. The first user div created child was named “outerBox”:
<div id="outerBox" class="f-x2" style="position:absolute; left:0px; top:0px; width:100%; z-index:1; background-color:#fff; overflow:visible">
- the position of this div is absolute (with reference to the browser window)
- starts on the left at 0px from the left edge of the browser window
- starts 0px from the top of the browser window
- is 100% of the full width of the browser window
- is one layer above the PageDiv div
- has a background color of white
- renders visible any contents that overflow
- because it has no height set, will shrink vertically to the size of its content.
The next div child is “innerBox”, and is completely different:
<div id="innerBox" class="f-x2" style="position:relative; width:770px; margin:auto; overflow:visible">
- the position is relative to the containing div (outerBox)
- has left/right top/bottom position, so is left to react to the container div
- has a defined width, which restricts is freedom to be fluid (770px)
- margin is the space around an html object. With a margin of auto, or a left/right margin of auto, the browser will provide equal space to either left or right side of the div beyond the 770px reserved for its width, essentially ‘centering’ the div.
- contents that overflow will be rendered visibly
- no height setting means the div will shrink vertically to match the content size
All the main content is inside the innerBox div, so the relative or floated positioning of this content is constrained by the container div - innerBox. All content outside of innerBox is free to fill the entire browser window while the innerBox content must be constrained by its width and centered position. This is why the “footer” div is free to be as wide as the browser window.
<div id="footer" class="f-x3" style="position:relative; float:left; width:100%; height:80px; clear:both; margin-top:15px; background-color:#dfdfdf; background-image:url(Resources/footer.png); background-repeat:repeat-x; background-position:left top; border-top:solid #999 1px; overflow:visible">
- the position is relative to its parent, which in this case is “outerBox” which you remember is wide as the browser permits
- it is floated left, which is completely unnecessary as its width is already 100%. The width could also have been undefined, or the left and right positions set to 0px
- clear is set to both, which guarantees no conflicts with items floated above
- other than a defined height, the rest is decoration
There you have it, hopefully, a long and thorough explanation of what is actually happening… that inline html items (relatively positioned items) are constrained by the items which contain them.
On 15 Sep 2012, 9:01 am, ejw wrote:
Ernie,
Yes the suggestion seems to fix the problem. Thank You.
But still interested to appreciate why the:-
http://www.reenoserve.com/newsiteworking/
version, which works OK as i want and is Walters code with my content and the page align is None???
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options