Re: Simple HTML & CSS code.
Peter Easthope wrote: > From: Siard > Date: Wed, 26 Oct 2022 00:00:26 +0200 > > > >Test.html > > > > > left > right > > > > > Thanks. Yes, that puts "left" on the left and "right" on the right. After a good night's sleep, I realized that I could have answered it much simpler. Just replace 'display: inline' with 'display: flex' in your original code, that's all. > I'm interested in a further detail illustrated with this simple example. > > > >Test.html > > > > > left > right > > > > > In a sufficiently wide window, Firefox renders this. > left right > > If the right edge of the window is dragged to the left it comes to this. > leftright > > If the window is constrained further the display is trimmed on the > right and provides horizontal scrolling. > left= > > For a narrow display, such as portait on a phone, an automatic line > break avoids the scrolling. > left > right > > Here this works. > > > > Test.html > > > > left > right > > > > Comments? > > A more realistic example at http://movingaroundpender.ca/ . Your code behind those two images in that URL: You are combining flex and float here, which is useless IMO. To put the second image below the first one on narrow screens, you can add 'flex-wrap:wrap' to 'display': If you like, you can mail me off-list for further questions.
Re (3): Simple HTML & CSS code.
From: Siard Date: Wed, 26 Oct 2022 00:00:26 +0200 Test.html left right Thanks. Yes, that puts "left" on the left and "right" on the right. > BTW, 'color: black' and 'background: white' is already the default for > 'body', AFAIK. > More info about the Flexbox model: www.w3schools.com/css/css3_flexbox.asp Thanks for that also. I'm interested in a further detail illustrated with this simple example. Test.html left right In a sufficiently wide window, Firefox renders this. left right If the right edge of the window is dragged to the left it comes to this. leftright If the window is constrained further the display is trimmed on the right and provides horizontal scrolling. left= For a narrow display, such as portait on a phone, an automatic line break avoids the scrolling. left right Here this works. Test.html left right Comments? A more realistic example at http://movingaroundpender.ca/ . Thx,... P. mobile: +1 778 951 5147 VoIP: +1 604 670 0140 https://en.wikibooks.org/wiki/User:PeterEasthope
Re: Simple HTML & CSS code.
On 10/25/22, pe...@easthope.ca wrote:
> Hi,
>
> Off scope but I don't know a better place to ask.
>
> If this HTML text is in a file, a browser should be able to render it.
>
>
>
>
> Test.html
>
>
>body { color: black; background: white; }
>div.inline { display: inline; justify-content: space-between; }
>
>
>
> leftright
>
>
>
> In bullseye, Firefox-esr, "leftright" is rendered at the left edge of
> the window.
>
> CSS "inline" puts the two words on a line as expected.
>
> I included "justify-content: space-between" with the objective of
> putting "left" at the left of the window and "right" at the right.
>
> Why doesn't it work?
dunno
> How should it be fixed?
I don't know how it _should_ be fixed, but this works for me
left
right
Regards,
Lee
Re: Simple HTML & CSS code.
On Tue, 25 Oct 2022 13:14 -0500, pe...@easthope.ca wrote:
> Hi,
>
> Off scope but I don't know a better place to ask.
>
> If this HTML text is in a file, a browser should be able to render it.
>
>
>
>
> Test.html
>
>
>body { color: black; background: white; }
>div.inline { display: inline; justify-content: space-between; }
>
>
>
> leftright
>
>
>
> In bullseye, Firefox-esr, "leftright" is rendered at the left edge of
> the window.
>
> CSS "inline" puts the two words on a line as expected.
>
> I included "justify-content: space-between" with the objective of
> putting "left" at the left of the window and "right" at the right.
>
> Why doesn't it work? How should it be fixed?
'display:inline' is only useful if you have more than one div.
However, 'display:inline' was obviously meant for 'span', not for 'div',
but 'span' _is_ already an inline element.
What's more, the 'justify-content' property belongs to the Flexbox model,
but you have not set the 'display' property to 'flex'.
This code works better:
Test.html
left
right
BTW, 'color: black' and 'background: white' is already the default for
'body', AFAIK.
More info about the Flexbox model: www.w3schools.com/css/css3_flexbox.asp
Simple HTML & CSS code.
Hi,
Off scope but I don't know a better place to ask.
If this HTML text is in a file, a browser should be able to render it.
Test.html
body { color: black; background: white; }
div.inline { display: inline; justify-content: space-between; }
leftright
In bullseye, Firefox-esr, "leftright" is rendered at the left edge of
the window.
CSS "inline" puts the two words on a line as expected.
I included "justify-content: space-between" with the objective of
putting "left" at the left of the window and "right" at the right.
Why doesn't it work? How should it be fixed?
Thanks, ... P.
