I don’t normally float left and right. I think that was an attempt to
figure out why the text was flowing out of it’s box and under the image.
Images are normally inline elements-- like text, so we normally insert them
into our text blocks and float them left or right as part of our layout.
Putting your text and images in different boxes seems logical as you want
to present them separately… as visually separate items. That’s logical. But
they actually go together… they’re related. So inserting an image as part
of the text is a natural way to use images and text together in HTML-- then
you can use styles to set those visual boundaries.
The text wraps under the image in the same way it would if you had just
inserted more text at the beginning of your paragraph, instead of an image.
In the 4th example, it’s control of the space under the image
(padding-bottom or margin-bottom) which controls how the text wraps around
the image.
I love the way the first solution works. Is there a way to adapt that so
the image is a fixed size, I would prefer to adjust the size only for
phones and leave it fixed at web and tablet browser sizes.
All of these can be employed at fixed sizes, though I would encourage you
to use percentages-- inflow layouts are meant to be flexible, you should
play to their strengths.
If you mean Example #2 - Image as background (the first example is a
baseline model for images placed into text blocks, and how text wraps
around them) Then make sure you have selected your default browser width
view in the responsive layout and start with the padding-left attribute of
the available-width container… if you want your image fixed at 360px wide,
then make the left padding 370px in the Inspector (10px wider to space the
text from the image). Now use the Inspector to set your image as the
background image of the container, positioned left and top and no repeat.
Now open the Extended styles for the container (menu Item > Extended) and
choose the div style
tab of the resulting window. Add the style property
background-size
with a value of 360px instead of the percentage value I
used.
I also added the background-position-y
property to visually adjust the
top of the image with respect to the text – to suit my tastes. You can
alternately do the same thing with the background-position
property, but
you would declare both x and y values like this – 0 7px – it’s all the
same really.
The appearance in Freeway’s workspace won’t look right, but preview or
publish should be just fine. All the other methods should also behave well
with fixed dimensions, although you can also calculate what percentages
give the desired sizes at screen view.
Best of luck.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options