[Pro] Inflow layout - 3 html boxes in a row

Freeway
1

I’m creating an inflow layout in which I need to have 3 html items in a row across the page. They need to remain centred in the page when the browser window width is adjusted.

Following the tutorial I can successfully do this with 2 items by having one float left and the other float right, but if I try with 3 items one invariably ends up below the others.

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

2

have tried the third item flow right?
Op 20 nov. 2014 13:58 schreef “Tim” email@hidden:

I’m creating an inflow layout in which I need to have 3 html items in a
row across the page. They need to remain centred in the page when the
browser window width is adjusted.

Following the tutorial I can successfully do this with 2 items by having
one float left and the other float right, but if I try with 3 items one
invariably ends up below the others.

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

3

sorry should be ‘float right’ ofcourse…(autocorrection tool)
Op 20 nov. 2014 13:58 schreef “Tim” email@hidden:

I’m creating an inflow layout in which I need to have 3 html items in a
row across the page. They need to remain centred in the page when the
browser window width is adjusted.

Following the tutorial I can successfully do this with 2 items by having
one float left and the other float right, but if I try with 3 items one
invariably ends up below the others.

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

4

When I do that I still can’t get the middle one to remain centred between the other two.

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

5

ok… they must stay three in a row, not stacked?
Op 20 nov. 2014 14:05 schreef “Tim” email@hidden:

When I do that I still can’t get the middle one to remain centred between
the other two.

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

6

Yes, three in a row.

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

7

see http://freewaytalk.net/thread/view/150856
Op 20 nov. 2014 13:58 schreef “Tim” email@hidden:

I’m creating an inflow layout in which I need to have 3 html items in a
row across the page. They need to remain centred in the page when the
browser window width is adjusted.

Following the tutorial I can successfully do this with 2 items by having
one float left and the other float right, but if I try with 3 items one
invariably ends up below the others.

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

8

Thanks Andries.

The thing that seems to have sorted it is making all 3 items float left, and then add the correct amount of left hand margin to the left hand item.

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

9

yeah it needs some fiddling for such an ordinary usage. At
scipty.walterdavisstudio.com/centered.html you can see what you were asking
for. Thanks to Walter.
Op 20 nov. 2014 15:05 schreef “Tim” email@hidden:

Thanks Andries.

The thing that seems to have sorted it is making all 3 items float left,
and then add the correct amount of left hand margin to the left hand item.

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

10

scripty.walterdavi… small keys grrrrr
Op 20 nov. 2014 15:05 schreef “Tim” email@hidden:

Thanks Andries.

The thing that seems to have sorted it is making all 3 items float left,
and then add the correct amount of left hand margin to the left hand item.

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

11

Thanks!

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

12

I think the proper way is to float all the items the same way.

To do this I create a row container, insert my items and float left. I also…

  1. use a Box Sizing method
  2. Clearfix the row container
  3. leave the width/height as flexible in Freeway’s controls, but apply a
    class style to declare the width as a percentage XX.XXX%
  4. apply padding and content as normal in Freeway
  5. set those styles to change width or float at breakpoints

http://cssway.thebigerns.com/workbench/three-column-row/

Margins between items is trickier (widths and horiz-margins must not exceed
100%, with box-sizing:border-box

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