Nested HTML Item Frustration

Freeway
1

I’m working on a document building a site like I normally do and I’m using parent / child nested DIV’s. I first make a parent container and then insert two child items into the parent. I float one child to the left and the other to the right and then the one on the right on-screen goes down a line. Now in the browser version things line up properly, it’s more or less a visual frustration on my Freeway page as to why it goes down a line. Especially when trying to line up things.

Is that natural, am I missing the boat on applying nested DIV’s properly for a flexible 2 column layout?

Any help or suggestions would be great.

(Using: Freeway 5.1.1 Pro)

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

2

This is a fine layout technique, and I use it a lot. But I haven’t seen this design-mode shift you speak of. I just tried it again to be sure, and didn’t see it. Are both of your floated child elements HTML boxes?

Walter

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

3

Here’s what I see in my Freeway document:

http://home.comcast.net/~danjasker/Picture_1.png

I create a parent DIV, double click in the container, goto Insert…HTML item (twice). Set item1 to float: left and the other to float:right and then that happens. I set the clear’s to left on the left and right on the right. I’ve set them to none as well and the same thing happens.

Am I doing something wrong?

Thanks Waltd for the response.

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

4

On 3 Jun 2008, at 02:36, Mitchell wrote:

I float one child to the left and the other to the right and then
the one on the right on-screen goes down a line. Now in the
browser version things line up properly, it’s more or less a visual
frustration on my Freeway page as to why it goes down a line.
Especially when trying to line up things.

I’ve had this, and it’s very frustrating. I have no idea why it
happens, I’m afraid, but it does sometimes right itself and, as you
say, it Previews fine. When you’ve inserted and floated your inlines,
try dragging each one slightly into different positions; that can
sometimes do it.

best wishes

Paul Bradforth

http://www.paulbradforth.com

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

5

This indeed happens every now and then when you ‘Insert HTML Item’. However, whn you just draw a HTML-box over a parenting HTML-box, it (1) automatically becomes a child and (2) can be positioned simply by dragging the item allover the place.

Nevertheless this behaviour sucks big time, and irritates the hell out of me. It also happens when you insert a couple more than 2 that is) of HTML-items next to each other, all Left alligned.

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

6

On 3 Jun 2008, 5:15 am, Mitchell wrote:

Here’s what I see in my Freeway document:

http://home.comcast.net/~danjasker/Picture_1.png

Try checking your parent box for extra line returns. I have noticed that if you insert an inline html box, then delete, then reinsert another html box you get extra leftover returns in the text box.

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

7

I’ve made sure there wasn’t any extra line spaces. If I set item1 to float left, item2 comes up right next to it. Same line and everything. Soon as I float item2 right, it does what it does in the picture.

Maybe Joe can pipe in if this is a visual bug?

Thanks for your responses.

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

8

Just as a general rule (not sure this will be any effect in your
case) you should always put your Right floats before your Left. This
fixes a bug in Firefox and related browsers. I believe that Freeway
does this automatically anyway, but you might want to check the
source order (by viewing source in your browser) and make sure that
your first child element (as you are reading the code) is set to
Float Right.

Walter

On Jun 3, 2008, at 12:02 PM, Mitchell wrote:

I’ve made sure there wasn’t any extra line spaces. If I set item1
to float left, item2 comes up right next to it. Same line and
everything. Soon as I float item2 right, it does what it does in
the picture.

Maybe Joe can pipe in if this is a visual bug?

Thanks for your responses.

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

9

That works waltd! I just made a new document and tested it out and it doesn’t drop a line. So make your first float right and your second left. Strange, but it makes sense.

Now to go adjust some items on other sites I’m working on that have this problem.

Thanks Waltd!

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

10

Does your output code have a non-breaking space between the inserted divs?

The only way I could get close to reproducing your situation was to “accidentally” drag the right inline div. This put it a bit lower than the left one – which also persisted in the output, so not exactly as your experience.

Btw, alternating the float order didn’t recreate the problem for me.

I do want to say that I am annoyed at the number of times FWY5 will “drag” inline items when I merely select them. Putting a layout back together after something like that can be a real pain.

On Tue, Jun 3, 2008 at 9:02 AM, Mitchell wrote:

I’ve made sure there wasn’t any extra line spaces. If I set item1 to float left, item2 comes up right next to it. Same line and everything. Soon as I float item2 right, it does what it does in the picture.

Maybe Joe can pipe in if this is a visual bug?

Thanks for your responses.

–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

11

On 3 Jun 2008, at 18:12, Ernie Simpson wrote:

I do want to say that I am annoyed at the number of times FWY5 will
“drag” inline items when I merely select them. Putting a layout
back together after something like that can be a real pain.

Seconded! If I make a site with an outer ‘maincontent’ DIV with two
inner DIVs floated left and right, and a footer with ‘clear: both’,
if I so much as touch the footer to edit it, it will spring up to
the top of the ‘maincontent’ container. Damned annoying. Although, to
be fair, I use a Wacom tablet for everything- if I use a mouse, it’s
a lot easier.

best wishes

Paul Bradforth

http://www.paulbradforth.com

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

12

Seconded! If I make a site with an outer ‘maincontent’ DIV with two
inner DIVs floated left and right, and a footer with ‘clear: both’,
if I so much as touch the footer to edit it, it will spring up to
the top of the ‘maincontent’ container. Damned annoying.

Thirded, Forthed, Fifthed…add infinitum! Glad someone else is seeing this.

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

13

Erns,

Doesn’t seem to be any breaks. If it works by alternating floats then that works for me. I’ll just change my new habit to another one. My “browser-viewable” version is fine when viewing it online. It’s just in the Freeway document itself (the screen-grab is from Freeway itself.)

I even went through the manual on inserting in-flow items to make sure I wasn’t messing up on such a simple thing.

Thanks for the help.

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

14

Ah, was just a shot in the dark. As I said, I couldn’t really replicate your situation exactly as described… even if I alternated the right-left float order.

On Tue, Jun 3, 2008 at 1:09 PM, Mitchell wrote:

Erns,

Doesn’t seem to be any breaks. If it works by alternating floats then that works for me. I’ll just change my new habit to another one. My “browser-viewable” version is fine when viewing it online. It’s just in the Freeway document itself (the screen-grab is from Freeway itself.)

I even went through the manual on inserting in-flow items to make sure I wasn’t messing up on such a simple thing.

Thanks for the help.

–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

15

This is great! I’ve been fighting this problem since I first got the program. I’m trying to have 3 child htmls instead of two. Does anyone know how to set the floats on 3? Also, in the inspector I have the width set to 15%, 70% and 15% again. How should I set the height?
Thanks everyone, this will restore my sanity, such as it is.

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

16

I will admit though it hasn’t been working in any older documents opened in 5.1.1. It did work however in any documents built during the beta stage (noticeably around 5.0p3) and brand new documents in 5.1.1. Regardless which way gets floated first, it still goes down like one line. I’ve tried dragging inline, tried turning on invisibles to see any Paragraph or Page Breaks…and I see nothing. I’ve looked in the code and see just the kind of div tags I’ve always seen.

I’d hope in the next update that they fix this. But, again, regardless of what I do it’s just more of a annoyance, but am glad that my browser-ready pages don’t have the same situation.

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

17

Height should be a function of content in my opinion. If your content
boxes (once they are filled) have no fixed height - and their
containers have no fixed height, they should all expand/contract
vertically to fit the content. (By “no fixed height” I mean the height
button on each has been clicked off).

As for widths, don’t forget that box padding will affect your
percentage widths in a negative fashion. That’s because borders or
padding are usually in fixed units – so the width of a 15% box with
10px padding and a 2pt border then becomes…

2px + 10px + 15% (of the box container) + 10px + 2px

If you try to set percentage widths in the padding widths, they are
relative to the box itself not the container, which can behave
strangely. Borders, I have no idea.

Usually in such a layout, I try to leave extra room so that with
padding/borders the items remain at a distance. Since I do not know
how to calculate this scientifically, I use my instincts mostly. It
takes a lot of patience as mishaps in judging the space can wipe out
your entire layout.

If your page is fixed width, don’t use percentages. If your width is
flexible, percentages will make better sense.

Here’s a quick and dirty toss up:
http://www.thebigerns.com/freeway/workbench/fw5_simple-three-col/

Doesn’t work well in IE6, but I suspect it’s a box model problem that
could be fixed if I had more time to spend on it.

On Thu, Jun 5, 2008 at 10:33 PM, Martin Henderson wrote:

This is great! I’ve been fighting this problem since I first got the program. I’m trying to have 3 child htmls instead of two. Does anyone know how to set the floats on 3? Also, in the inspector I have the width set to 15%, 70% and 15% again. How should I set the height?
Thanks everyone, this will restore my sanity, such as it is.

–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com

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

18

You are a treasure! Thank you

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

19

After a wee-bit of messing around I ran into a strange situation that might possibly be why others weren’t able to replicate my in-flow HTML item shift. I think it has something to do with opening older Freeway documents in 5.1.1. I’ve also ran into the problem when making a new document and importing CSS styles from an older document thinking I could just copy, paste, and re-style. I’ve also had it where I had items laid out, made a new text style, and then tried to put more in-flow items on the page and it worked fine before the style was there, after that…not so much.

So I’ve made a ScreenCast to show what I mean. I’ve made it available in two formats. Either for download or viewable online (FLV video in SSP, hit play in the middle of the picture first), found here: http://home.comcast.net/~danjasker/box

The download of the MOV file (Quicktime, 3.82 MB, Higher Quality) is available here: http://www.mediafire.com/?9zwiznictmr

Basically I have a new document setup, my BlogSpot template in this example, and I’ve just imported some styles into the CSS palette. I then try to create some in-flow items and get the box shift. Now when I make a new style sheet and change the page CSS sheet from “styles” to “without_styles” the box shift doesn’t occur. Now I’m thinking maybe it’s a line-height issue. I have line-height set to 18px in my “body” tag and my “p” tag has 20px. But if I create a new style and then later I try to add in-flow items it shifts while with no styles on it doesn’t.

Any ideas now that you can see it? Should I be setting line-height specific to the box it’s in?

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

20

Oh, i forgot to add that even if I delete the leading out of the body tag (or the p tag or any tag), it still won’t shift back to an even level. I even delete the styles one by one to see if it’s a specific one and once they’re all gone, the boxes re-shift.

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