Horizontally spacing items in a container

Seems like a crazy question, I know, but…
What is the easiest way to have 3 HTML items within a container placed one on the left, one centred and one on the right?
If I left float items 1 and 2 and right float 3, items are as one would expect, i.e. 1 and 2 adjacent to each other on the left, with 3 on same line at the right.
If I then try to align centre 2, 3 moves to another line and 2 centres in the space left between 1 and the right hand edge.
All items have fixed % width and flexible height in a 100% width and flexible.
I’m sure the answer is obvious, but any help appreciated!


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

Have you tried adding a margin to item2.

If your items are fixed percentages then simple Maths should tell you what margins are available.

Maybe even Margin:Auto would work for you but I would like to see your example page online before being definitive.

David


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

Dave, thanks again.
You don’t need to see the page online. I’m talking about basic principles here. Of course there will be workarounds with margins etc. but there must be an obvious way.
Try this.
Open a new file with page flexible width. Create a pagewrapper of ‘available’ width.
Insert 3 x HTML items in the wrapper (they’ll all be minimum 100x high). Allocate fixed % widths of, say, 20%, 30%, and 20%.
Can you tell me how to get them all in the same horizontal line with the 20 on the left, the 30 centred and the other 20 on the right, so they all work correctly, i.e. maintain their positions, when browser width is changed.
Everything I try with floats, margins, etc. just doesn’t work 100% correctly.


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

Here’s an example of one way to do this:

http://scripty.walterdavisstudio.com/centered-plus-float.html

In terms of basic principles, the way this works is to set the three child elements to display: inline-block. There is no convenient way to do this in Freeway directly, you will need to use the Extended interface to add this property. Then the text-align in the main wrapper element is set to center, which gets your three boxes centered. Finally, float the left one left and the right one right, and you’re all done. Note that I also set overflow: hidden on the wrapper, which means that if one of the end boxes is taller than the middle box, you won’t end up with it hanging out of the bottom of the wrapper. Overflow: hidden means that the wrapper considers its floated children when calculating its own height.

Walter

On Aug 31, 2014, at 5:25 PM, Iain Mackenzie wrote:

Dave, thanks again.
You don’t need to see the page online. I’m talking about basic principles here. Of course there will be workarounds with margins etc. but there must be an obvious way.
Try this.
Open a new file with page flexible width. Create a pagewrapper of ‘available’ width.
Insert 3 x HTML items in the wrapper (they’ll all be minimum 100x high). Allocate fixed % widths of, say, 20%, 30%, and 20%.
Can you tell me how to get them all in the same horizontal line with the 20 on the left, the 30 centred and the other 20 on the right, so they all work correctly, i.e. maintain their positions, when browser width is changed.
Everything I try with floats, margins, etc. just doesn’t work 100% correctly.


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

Open a new file with page flexible width. Create a pagewrapper of ‘available’ width. Insert 3 x HTML items in the wrapper (they’ll all be minimum 100x high). Allocate fixed % widths of, say, 20%, 30%, and 20%. Can you tell me how to get them all in the same horizontal line with the 20 on the left, the 30 centred and the other 20 on the right, so they all work correctly, i.e. maintain their positions, when browser width is changed.

Well my method is as you have described but the pagewrapper is 100% width and not ‘available’.

Sizes are 20%, 30% and 20% - total 70%

Item 1 float:left, item 2 float:left, item 3 float:right

Item 1 margin-left: 7.5%, item 2 margin-left: 7.5%, margin-right: 7.5%, item 3 margin-right: 7.5% - total margins 30%

http://www.deltadesign.co/FW7Test/centre-boxes.html

This may not be the ‘right’ way but it seems to work.

D


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