Side by side Image and text (7pro)

Freeway
1

This is probably easy but I can’t get it to work.

I made an inflow HTML box, width available. Inside I want an image (FIXED WIDTH) on the left side and text to the right of it going to the right edge. The problem is I don’t want the text to wrap around the image, but stay inline on the left side. As the page adjust to browser width the text block would grow but stay out from under the image. Similar to how conversations look on facbook, the small avatar on the left and all the text justified to the right and not wrapping around the avatar.

I tried creating 2 HTML boxes inside my “container”. One with the image in it; Float Left, Fixed width and Height 100%. The other is Float Right with the text in it Width Available, Height Flexible. Clear set to none on both. The problem is that the text still flows under the image.

I’m sure there is an easy, proper, way to do this…

Craig

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

2

I tried creating 2 HTML boxes inside my “container”. One with the image in it; Float Left, Fixed width and Height 100%. The other is Float Right with the text in it Width Available, Height Flexible. Clear set to none on both. The problem is that the text still flows under the image.

Share a link but your problem is likely to be that 2 items cannot go side by side if one of them takes up 100% of the width. No room for the other.

D

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

3

http://chairsofchicago.com/projectsandaward.html

It’s a bit of a mess ATM but the idea is if you look at the Twilight Zone logo I’d like no text under it. The text is wrapping around even though the edge of the HTML box it’s in stops where the type is to the right of the logo.

I’m not sure how it ended up last time I did a test post but the Logo HTML should be FIXED width and the type box should be AVAILABLE width

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

4

I’ve worked up a couple of examples of how I might do this, with a
downloadable sample -
http://cssway.thebigerns.com/workbench/text-and-images/

I also want to say that this floating left and right thing is not good to
do. Floats are not a very intuitive structures, and great care should be
taken not to abuse them. In the example, I use a traditional floated column
example much like what you tried. Both column divs are wrapped in a “row”
div, and both are floated left - as they should be. Widths are in
percentages, and I must say I was impressed with the way Freeway 7 handled
this simple exercise. While I do not use the Box-Sizing or Clearfix
actions-- I use my own CSS solutions for these, which doesn’t necessarily
improve the Freeway workspace experience but produces extremely beautiful
page code. I mention this not (just) to brag but because box-sizing and
clear-fixing are very important to achieving good results with both inflow
layouts and floats.

Hope this is helpful.

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

5

Hope this is helpful.

Uh yes, quite! Thank you.

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.

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.

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

6

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

7

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.

I do want to use percentages but some images would have to start out very large to be a reasonable size in smaller windows. So with those I’d like to step them down in size at breakpoints instead.

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.

Thank you for this guide. I’ll be trying it with gusto come Monday. I’m slowly getting the hang of the inflow responsive style. You’re (and others) sharing of knowledge is most appreciated.

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.

I can see that when trying the download you provided. Not a problem. I’ll gladly give up some WYSWYG for a more powerful program.

Again, Thank You!

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