Flexible Inline Objects
Walter Davis
17 Sep, 2008
Play: inlines-desktop.mov (1.37 MB)
(782 downloads)
Here’s how to make a flexible-width page that rearranges its contents when the browser is resized. (No sound.)
Here’s the steps I follow:
- Draw an HTML box on the page, make it 80% width using the Inspector.
- Double click inside it to get a text cursor, insert a graphic item as an inline object.
- Resize and style the graphic item, set its bottom and right margin to add spacing between elements.
- Copy the graphic to the clipboard, then double-click again to get a text cursor next to it within the HTML box (its parent) and paste, paste, paste some more.
- Resize the parent using Shift-Command-D. (Alternatively, you could click on the icon to the left of the height field in the Inspector and make the parent item stretch vertically.)
- Set the top-left padding of the HTML box to match the bottom-right margin, just so the page will center perfectly.
Now when I preview into a browser, you see the page re-flow to match the browser window size.
