Re (3): Simple HTML & CSS code.
From: Siard <shiems+debian@mailbox.org>
Date: Wed, 26 Oct 2022 00:00:26 +0200
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test.html</title>
<meta charset="UTF-8">
</head>
<body>
<div style="display:flex; justify-content:space-between">
<div>left</div>
<div>right</div>
</div>
</body>
</html>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test.html</title>
<meta charset="UTF-8">
</head>
<body>
<div style="display:flex; justify-content:space-between">
<div>left++++++++++++++++++++</div>
<div>====================right</div>
</div>
</body>
</html>
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.
left++++++++++++++++++++====================right
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test.html</title>
<meta charset="UTF-8">
</head>
<body>
<span style="float:left">left++++++++++++++++++++</span>
<span style="float:right">====================right</span>
</body>
</html>
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
Reply to: