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!
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.
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.
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’.