[Pro] 3 box inline layout

Freeway
1

Hi everyone,

Please help! I’ve been at this all day and I’m about to burst.

I want to create 3 html boxes in one line so I can add content into them. There will be a headline and body text in each. The idea is that they would be responsive. I’ve tried everything and I can’t get them to line up. At all. Ever. Why can’t I do this?

It would be great to get a (very simple) step by step.

I hope someone can help!

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Mark,

Try this and see how you get on:

  1. Double-click so you get a blinking text cursor, and in the menu bar, to go Insert > HTML Item.
  2. In the inspector, set it’s width to 33%. Also, set it to “float: left”.
  3. Press ⌘D twice to duplicate that two times.

That should work for you!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Hi Caleb,

Thanks for the reply, and very easy to follow steps! :slight_smile:

I did as instructed but when I duplicated them the second and third box didn’t paste in exactly horizontal with the first but sort of nudged down. Like a sort of stepped effect. How can I get all the boxes to be all on one line?

Thank you Caleb!

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Huh. Could you post a link? That’s not what I’m seeing over here!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

That can happen if there is not enough space for all 3 items.

/OmarKN

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Ok, so this is weird. On my freeway document, they’re doing the weird stepped thing. But when I coloured them to show you this effect and published it, on the browser they are all in line.

There has to been something wrong though! What’s happening with my freeway document?

I’ve uploaded the test site here:

http://www.idle-creative.com/test/

Thank you for your help!

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Well, in that case, it sounds like a Freeway bug. I’d recommend pinging Softpress about this.

Beyond sending in the bug report, I wouldn’t worry about it too much as the output looks OK. Freeway doesn’t have a real browser rendering engine in the construction view, which means that sometimes there will be a discrepancy. Oftentimes, those differences are not worth fighting with, as they only affect the appearance in the construction view, and not the actual website.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

Pretty sure that this is this old thing with line-height on body (for whatever reason). Remove it and apply it by hand if necessary or apply it elsewhere.

BTW

A bit of math:

100% : 3 = 33.3333%

while

33% x 3 = 99%

Missing 1% percent isn’t it?

The page-wrapper isn’t needed in this construction.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

100% : 3 = 33.3333% while 33% x 3 = 99%

True. I was just trying to give him a quick-n-dirty set of instructions to test against. However, I should have just said 33.3333%

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Hi Thomas,

Thank you for your reply. You said something about line-height on body. Could you explain just a little more about how I should do that? Are you referring to the ‘body’ style setting for my text?

Very many thanks,

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

Are you referring to the ‘body’ style setting for my text?

Yep! It says

body { 
color:#666; 
font-family:'Raleway', sans-serif; 
font-size:12px; 
line-height:20px; 
text-align:left; 
margin:0px; 
background-color:#fff; 
height:100% 
}

I’m not aware where this style has been created, but there is the line-height. It may happen, that some properties will be directly reflected on FWs workspace. And out of experience I know, that line-height can cause stair tread on DIVs.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

12

FYI, Freeway’s name for line-height is “leading”. Check for that in the styles editor for the “body” style.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

13

Thanks everyone! That’s really helped and sorted the problem.

M :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options