Dear all, I have been trying to sort this out all day. Messing with the code, looking through the interwebs. The goal is to align the images with space between them and to look the same at 960px width and up. Any clue? Much Gratitude, Max
Hi there MaxTitan, here is one possible solution... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <link rel="stylesheet" href="screen.css" media="screen,projection,tv"> <style media="screen,projection,tv"> body { background: #f0f0f0; font: 1em/1.6em verdana,arial,helvetica,sans-serif; } #navigation { padding:0; margin: 0; border: 1px solid #999; list-style: none; overflow: hidden; background: #fff; } #navigation li { float:left; width: 19.5%; margin: 0.25%; padding: 0.25em 0.25em 1.4em; border: 1px solid #999; box-sizing: border-box; background: #fcfcff; } #navigation a { display: block; font-size: 0.8em; color: #666; text-align: center; text-decoration: none; } #navigation img { display: block; width: 100%; height: auto; margin-bottom: 0.4em; border: 1px solid #666; box-sizing: border-box; } @media screen and (max-width:31em) { #navigation li { width: 24.5%; } } @media screen and (max-width:21em) { #navigation li { width: 32.5%; } } @media screen and (max-width:17em) { #navigation li { width: 49.5%; } } </style> </head> <body> <ul id="navigation"> <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li> <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li> <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li> <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li> <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li> </ul> </body> </html> Code (markup): coothead
If you don't care about legacy browsers, have a look at display: flex; - it is made for what you're asking about, combined with percentage size images.
If by legacy you mean Firefox and Safari... since gecko and webkit still have major functionality and implementation flaws compared to Edge and Blink... Which is why for columns, flex is still buggy trash not ready for prime time. Hell it's BARELY usable for min-height layouts.
While I don't doubt what you're saying, what bugs does gecko display with display: flex? I've used some very limited versions of flex-box on a couple pages, and haven't encountered any bugs (but then, not very complicated setups either).
Flex inside a flex falls apart miserably... this can be annoying when trying to use it for an outer min-height layout where the header is full width,footer is full width, and multiple columns of content/sidebars in the middle. I forget the exact circumstance that I had the problems, but the differences between Chrome, Safari, and Firefox have left me using Flex with an eyedroppers instead of the grand paintbrushes I had hoped for. Shame it's not as simple, elegant, or usable as the CSS Grid Layout module -- which right now is only fully supported in the latest builds of Safari, and has partial -ms- prefixed support in EDGE. https://www.w3.org/TR/css-grid-1/ Cannot be implemented across all browsers fast enough for me... the handful of cases I have used it (like a win10 crapplet) it was bloody brilliant and SO much simpler than the implementation disaster that is flex-box. It's so ridiculously superior to flex on most every count... but since Microsoft are the ones who proposed it don't plan on seeing the FLOSS fanboys implement it in Firefux any time soon since "rawrs microshafts rz teh evils, fite da man!" See the decade and a half it took for other browsers makers to admit that word-wrap:break-word; and @font-face were worth implementing and adding to the spec. Gotta love it when bleeding edge CSS3 stuff works 100% identical in IE 5.01... and as always see bugzilla 915 for just how fast that open sores code fixes bugs.
Ah, I haven't used flex-box within flex-box - I basically just use it for simple even spacing for horisontal lists and such currently, and for some easy adjusted columns (three-column layouts with not much else). Fallback is simple, so it doesn't really matter if it doesn't work, even, as it will just mean that things gets a bit less good-looking. Haven't had a look at the CSS grid as of yet, simply because it's really not supported (I hate Safari with a vengeance ) - maybe I'll test it for a bit and see if it might be useful in about 2-3 years time when it might be fully supported
Interesting conversation, thanks for taking the time to respond and chat. I actually saw a back end web developer using the command flex because I asked him about it. I am a Graphic Designer, but am trying to up my arsenal of skills for the job market. Any how, I am still having minor problems... Haven't even began debugging for phones. http://lichen.csd.sc.edu/sce/ this is how it looks. I'll look into flex.