Peter Easthope wrote: > From: Siard <shiems+deb...@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.
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. > <!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/ . Your code behind those two images in that URL: <div style="display:flex; justify-content:space-between"> <span style="float:left"> <img src="image1.png" alt="..."> </span> <span style="float:right"> <img src="image2.png" alt="..."> </span> </div> 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': <div style="display:flex; justify-content:space-between; flex-wrap:wrap"> <img src="image1.png" alt="..."> <img src="image2.png" alt="..."> </div> If you like, you can mail me off-list for further questions.
