OK, I’ve reviewed the various web casts and info on making inline box model websites. The Thomas Kimmich webcast was very good in detailing basics and using the Command-D trick! Also in using the Items view to work with all the elements in a box model layout. Thanks!
I’m trying to understand if there’s some take-aways that always apply in making these inline box model layouts?
For example can one say any of these following generalizations are true?:
Automatic undefined height should be set to any html box inside a wrapper or container in a box model?
That the box model wrapper or container ‘overflow’ should always be set to “hidden” unless there’s a full width column at the bottom of the container/wrapper?
That floats for more than two mutiple columes should be set to ‘left’, and clears to ‘left’, unless it’s two columns, then the floats should be ‘left’ and ‘right’ and the clears should be ‘both’?
I’m just wondering if there’s some good reliable rules for when to use undefined height, floats, and clears? If someone has the “ah-ha moment” in understanding when to use what in box models, and can put it down in writing, I’d be very grateful. Thanks - Lewis
Automatic undefined height, in my FW setup is set to “Ask” because I don’t want it to always default to an undefined height in case I work on a drag-and-drop style project. If however an HTML item is inside of a wrapper or container then yes I would generally recommend using undefined heights.
Overflow set to hidden is used when boxes are next to each other such as columns. If you created a container, inserted two HTML items into it, floated one left and the other right you would have to set the container to be overflow - hidden or else the layout breaks. If you were setting up a footer area with say 4 boxes in it then you would also set the overflow to be hidden if those boxes related to each other horizontally because you probably would float them left.
No, the clears are left to none in cases were columns are used. You would probably achieve the same results if you set them to clear left or clear right, but it just seems overkill as long as there isn’t a box that could fit between them. That’s where you would have to set a clear on the columns to make sure that new box sits under the two columns.
I have some free box model skeleton templates available on my site to see how different setups would go. 2-column, 3-column, etc.
the basic understandings of boxmodel I got from Dan Jasker’s Screencast and it is highly recommendable.
I must admit, that I trained those methods a trillion times, watched the cast nearly the same times but I’m now so far to use it as similar as the traditional layout technique drop and drag. So it could be said: “the best 5 bucks I ever invested”.
For me boxmodel is the “must” if it comes to CMS like WebYep so:
The undefined height: Yes - absolutely. The big point here is to achieve to most stable layout with the maximum flexibility of interacting those boxes setting them into a relationship.
The wrapper I always set to 100% width and default visible. A hidden setting I use to do, if I need to fill a box with color or bg image and this box shall contain another box(es). I found out that if not doing so, this color or image is not displaying for whatever reason.
If I have two columns, I set one left/left the other right/right. More than two, the first left/left all the others just left.
Dan describes this a bit more restricted to use the first method and the fill those with another two each l/l and r/r again. I never saw a bigger difference.
Once again: My screencasts may be a good amateur-standard, Dan’s are professional, from the first to the last second and you’ll quick see, why mine are free and why he needs to purchase some bucks (but I have fun and it’s a good way to improve my pigeon english).
And Dan has a few free boxmodel layouts to download that could be a good start for a tryout (or probably startup). So have a look at danjasker.com
But one aspect of understanding a boxmodel we haven’t covered yet:
Site-planning
from structure and design viewpoint is an other aspect keeping people away from this method. But I think it’s outermost important to wrap some quick thoughts about before you start.
I once tried to illustrate parts of it in this “tryout” page that you can find here: