# \[Pro\] Center inflow Items

**URL:** <https://discourse.softpress.com/t/pro-center-inflow-items/20631>\
**Category:** Freeway\
**Created:** [July 30, 2014, 11:17pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631 "2014-07-30T23:17:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 30, 2014, 11:17pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/1 "2014-07-30T23:17:22Z")

</div>

Working in the New Freeway Pro 7. Trying to adjust from what I learned using Backdraft.  
I cannot for the life of me figure out how to center my Orange inflow Icons so that when the browser window expands they stay center instead of left.

Any help would be appreciated.

Billy

[http://smartytest.com/Greek/](http://smartytest.com/Greek/)

* * *

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

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [July 31, 2014, 6:57am UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/2 "2014-07-31T06:57:33Z")

</div>

inspector → first tab (measurements), alignment -\>center.

Cheers

Thomas

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 4:32pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/3 "2014-07-31T16:32:35Z")

</div>

Yeah I tried that. Seems to make sense but it didn’t work. Weird.

Billy

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 4:36pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/4 "2014-07-31T16:36:01Z")

</div>

Did you have the inner element (the one you want to center) selected at the time? And is this a truly inflow chile element, or is it positioned within the outer HTML box?

Walter

On Jul 31, 2014, at 12:32 PM, billy kimmel wrote:

> Yeah I tried that. Seems to make sense but it didn’t work. Weird.
> 
> Billy
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 4:47pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/5 "2014-07-31T16:47:31Z")

</div>

I have an html div that stretches the full width of the page with fixed% setting(W) and Flexible(H). Inside of that div are 4 html divs. Inside each of those divs is a graphic box and an html box for some text.

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 5:06pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/6 "2014-07-31T17:06:05Z")

</div>

The other interesting thing about this is that unless I float the parent div left, the background color will not show.

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 5:10pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/7 "2014-07-31T17:10:34Z")

</div>

You’re going to need to use the inline-block layout method instead. Select each of the 4 inline HTML boxes, and make the following changes:

1. Float left (if you don’t see that option, then the item is not truly inline).
2. Margin right and left as desired (to space the elements apart a bit).
3. Item / Extended, choose 
 and add the following (left of the colon is the Name, right of the colon is the Value, the colon does not get entered):
  - float:none
  - display:inline-block

Now click on the outer box containing these items, and again use Item / Extended to add text-align:center to the box’s

 tab.

Preview in a browser (you won’t see anything you like in the Freeway design view).

Walter

On Jul 31, 2014, at 12:47 PM, billy kimmel wrote:

> I have an html div that stretches the full width of the page with fixed% setting(W) and Flexible(H). Inside of that div are 4 html divs. Inside each of those divs is a graphic box and an html box for some text.
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 5:11pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/8 "2014-07-31T17:11:23Z")

</div>

Change the overflow setting on the parent div to hidden. Then you won’t need to use the “float-to-clear-a-float” trick as you are currently.

Walter

On Jul 31, 2014, at 1:06 PM, billy kimmel wrote:

> The other interesting thing about this is that unless I float the parent div left, the background color will not show.
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 6:04pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/9 "2014-07-31T18:04:21Z")

</div>

So I was able to get the divs to center by adding a max-width in the extended attributes. However I still cannot put a background color on the parent div id it is center. Only if it is floated left or right.

Billy

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 6:13pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/10 "2014-07-31T18:13:36Z")

</div>

Can you post a link to a demo page where I can see the actual HTML?

Walter

On Jul 31, 2014, at 2:04 PM, billy kimmel wrote:

> So I was able to get the divs to center by adding a max-width in the extended attributes. However I still cannot put a background color on the parent div id it is center. Only if it is floated left or right.
> 
> Billy
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 6:16pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/11 "2014-07-31T18:16:19Z")

</div>

[http://smartytest.com/Greek/](http://smartytest.com/Greek/)

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 6:26pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/12 "2014-07-31T18:26:56Z")

</div>

This example is not using the float:none, display:inline-block trick that I outlined – it’s still stuck at float:left. Look at this:

[http://scripty.walterdavisstudio.com/centered.html](http://scripty.walterdavisstudio.com/centered.html)

View source (it’s hand-coded, so the CSS is more clear). Change the browser dimensions and see how it all hangs together.

Walter

On Jul 31, 2014, at 2:16 PM, billy kimmel wrote:

> [http://smartytest.com/Greek/](http://smartytest.com/Greek/)
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 6:58pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/13 "2014-07-31T18:58:08Z")

</div>

Ok that worked but wow that’s a lot of steps just to get that to happen.

Thank you for your help.

Billy

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 31, 2014, 7:20pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/14 "2014-07-31T19:20:42Z")

</div>

There’s an Action to do Inline-Block, but I don’t think it’s ready for 7 at the moment. You’ll need to wait until I launch Inlay before that gets any love.

Walter

On Jul 31, 2014, at 2:58 PM, billy kimmel wrote:

> Ok that worked but wow that’s a lot of steps just to get that to happen.
> 
> Thank you for your help.
> 
> Billy
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![billyk](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/b/6de8d8/32.png) [@billyk](https://discourse.softpress.com/u/billyk)\
**Post date:** [July 31, 2014, 7:25pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/15 "2014-07-31T19:25:50Z")

</div>

Great. Looking forward to it.

* * *

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

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [July 31, 2014, 7:48pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/16 "2014-07-31T19:48:39Z")

</div>

> On 31 Jul 2014, 6:58 pm, billy kimmel wrote:
> 
> Ok that worked but wow that’s a lot of steps just to get that to happen.
> 
> Thank you for your help.
> 
> Billy

Billy,

for exactly this reason, I teach, recommend, preach and pray using (some) more DIVs (items) to make things like these happen.

You are a Backdraft user, have you ever had a look at the Lounge (using your BD voucher)?

If - you probably remember:

The first DIV I enter, I call #section - the outermost wrapper, 100% wide (stretching all across the browser window). The second one - the first inlineDIV I call #area. This is defining the page width - and this is the one I center. In there you can start to add the three columns (in my words the grid).

Doing this - it’s just the recommended mouse-click center for #area, done.

Cheers

Thomas

* * *

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

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [July 31, 2014, 9:09pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/17 "2014-07-31T21:09:00Z")

</div>

> On 31 Jul 2014, 4:47 pm, billy kimmel wrote:
> 
> I have an html div that stretches the full width of the page with fixed% setting(W) and Flexible(H). Inside of that div are 4 html divs. Inside each of those divs is a graphic box and an html box for some text.

After minding about this a lil bit more, I think there only missed the max-width (1200px for the #threeWrapper) which broke the center concept for this (and all other) backdraft modules.

Unfortunately you removed (or worked further) it meanwhile - so no chance to verify.

Cheers

Thomas

* * *

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

---

<div class="post-metadata">

**Author:** ![Wimdg](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/w/c5a1d2/32.png) [@Wimdg](https://discourse.softpress.com/u/Wimdg)\
**Post date:** [August 4, 2014, 10:14am UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/18 "2014-08-04T10:14:36Z")

</div>

Is the ‘inline block’ method Walter described, the cure for a three column row that moves under each other, when resizing a window?

I do not want to create a breakpoint because the three boxes are very readable on the iPad size screen.

Am very curious if inline block does the trick!  
Guess it does, so I am gonna try it anyway…

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [August 4, 2014, 9:00pm UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/19 "2014-08-04T21:00:22Z")

</div>

Yes, it’s a great solution to this problem.

Walter

On Aug 4, 2014, at 6:14 AM, Wimdg wrote:

> Is the ‘inline block’ method Walter described, the cure for a three column row that moves under each other, when resizing a window?
> 
> I do not want to create a breakpoint because the three boxes are very readable on the iPad size screen.
> 
> Am very curious if inline block does the trick!  
> Guess it does, so I am gonna try it anyway…
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![JDW](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jdw/32/2729_2.png) [@JDW](https://discourse.softpress.com/u/JDW)\
**Post date:** [August 5, 2014, 7:15am UTC](https://discourse.softpress.com/t/pro-center-inflow-items/20631/20 "2014-08-05T07:15:04Z")

</div>

More about Walter’s INLINE BLOCK method of centering:

[http://freewaytalk.net/thread/view/8446#latest](http://freewaytalk.net/thread/view/8446#latest)

–James Wages

* * *

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

[Next page](https://discourse.softpress.com/t/pro-center-inflow-items/20631.md?page=2)