f



Float an image and center the rest - impossible?

I may be asking the impossible (by definition)?

I wanted to introduce an image (boots) into a page describing a 
forthcoming forest walk.  What I want is to have the image on the left, 
with the other elements (a heading, and a few short paragraphs) flowing 
around it.  So far so good.

But I want the heading, and the paragraphs, to remain centred with 
respect to the page - not just centred in the remaining space (which is 
offset to the right by the floating boots).

I've managed to get something to work for the header ("Knighton Woods").  
I've expressed the size of the image, and its margins, in VW units (1vw 
= 1% of the Viewport Width), so it scales nicely.  For the header, I've 
used Relative positioning to shift it rudely by half the width of the 
image and margins {position:relative; left: -7.5vw}.  Looks fine!

But this isn't going to work for the paragraphs below.  While the short 
header is always going to be displaced (without this correction) to the 
right by the image, because of its proximity, the paragraphs below may 
or may not be affected by the float, depending on the viewport width.  
You can see this if you adjust the viewport width so that only a part of 
a line is left at the bottom of the first paragraph - that part-line is 
offset (from the page's centre axis) by the space taken by the image.  
It might look right at first, but if you adjust the width so that only 
the word "trees." is wrapped to a new line, you'll see that word is off-
centre to the right.

See http://walthamsoft.com/foef/2016/2016-1006.htm 

I tried wrapping image, header(s) and paragraphs within an additional 
div, and setting {text-align:center} on the div, but this didn't work.

I've considered making the boots a background image, but with a narrow 
viewport the text may overlay it (and so be hard to read, as well as 
ugly).  I could create a margin to the right of the text of the same 
width as the boots, but that's wasting space!

I've learned with CSS that most things are possible (if you ask how to 
achieve it in this group!).  Any ideas?  I do think it's a trick worth 
mastering.
-- 

Phil, London
0
Philip
7/31/2016 4:02:43 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

2 Replies
235 Views

Similar Articles

[PageSpeed] 44

In article <MPG.3208317d897e43f5989727@news.eternal-september.org>,
 Philip Herlihy <thiswillbounceback@you.com> wrote:

> I may be asking the impossible (by definition)?
> 
> I wanted to introduce an image (boots) into a page describing a 
> forthcoming forest walk.  What I want is to have the image on the left, 
> with the other elements (a heading, and a few short paragraphs) flowing 
> around it.

> See http://walthamsoft.com/foef/2016/2016-1006.htm

Just some thoughts. 

Imo, centred main reading text should be used very sparingly if at 
all: some main headings, maybe some main pics and videos.... Not just 
an aesthetic matter, it is harder to read.  

You will struggle to achieve this without disengaging the left image 
from the main body of paragraphs, floating not being enough.

A background of the boots or an absolutely positioned boots and the 
main body of paragraphs given an equal margin left and right to clear 
the image on the left and to be the same for your evenness on the 
right might be a way to go. Obviously the margins will be at the cost 
of using the viewport width to best advantage, but you might think 
centring more important.

> I tried wrapping image, header(s) and paragraphs within an additional 
> div, and setting {text-align:center} on the div, but this didn't work.

text-align: center; does *inline*. Might help to see 

<http://netweaver.com.au/centring/>

if you don't find better than mine.

-- 
dorayme
0
dorayme
8/1/2016 4:53:15 AM
In article <do_ray_me-CDD85D.14531501082016@46.sub-75-242-
165.myvzw.com>, do_ray_me@bigpond.com says...
> 
> In article <MPG.3208317d897e43f5989727@news.eternal-september.org>,
>  Philip Herlihy <thiswillbounceback@you.com> wrote:
> 
> > I may be asking the impossible (by definition)?
> > 
> > I wanted to introduce an image (boots) into a page describing a 
> > forthcoming forest walk.  What I want is to have the image on the left, 
> > with the other elements (a heading, and a few short paragraphs) flowing 
> > around it.
> 
> > See http://walthamsoft.com/foef/2016/2016-1006.htm
> 
> Just some thoughts. 
> 
> Imo, centred main reading text should be used very sparingly if at 
> all: some main headings, maybe some main pics and videos.... Not just 
> an aesthetic matter, it is harder to read.  
> 
> You will struggle to achieve this without disengaging the left image 
> from the main body of paragraphs, floating not being enough.
> 
> A background of the boots or an absolutely positioned boots and the 
> main body of paragraphs given an equal margin left and right to clear 
> the image on the left and to be the same for your evenness on the 
> right might be a way to go. Obviously the margins will be at the cost 
> of using the viewport width to best advantage, but you might think 
> centring more important.
> 
> > I tried wrapping image, header(s) and paragraphs within an additional 
> > div, and setting {text-align:center} on the div, but this didn't work.
> 
> text-align: center; does *inline*. Might help to see 
> 
> <http://netweaver.com.au/centring/>
> 
> if you don't find better than mine.

Thank you for this - and I will indeed revisit the desirability of 
centring text, for the reasons you cite.  The reminder, through your 
(re-)illuminating article, of the distinction in centring between block 
and inline items is also valued.

I guess (hopefully thinking a little more clearly) that I'd hoped there 
might be a way of telling content (text) to centre itself in relation to 
a grandparent element (a div, maybe), regardless of possible 
displacement of a parent element (p) by its sibling (floated image).  
This probably makes no kind of sense, and I'm beginning to realise that 
it's more about a misled conception than any gap in capability.  
Certainly, the problem goes away if I left-align text (or even justify 
it).

Thank you for your patient explanation (and not for the first time).

-- 

Phil, London
0
Philip
8/1/2016 1:13:15 PM
Reply: