A tricky one, but I’m sure anything is possible. For 1 to 4 display: table would do it. 5 would have to be placed explicitly over that.
The other challenge is, if the boxes are full of text, getting it to wrap around box 5. In 3 and 4 you could have dummy boxes floated underneath to force the text to wrap, but in 1 and 2, I’m not sure how you would get the floats at the bottom.
Don’t have time right now to think too deeply about it.
HTML tables should only be used for tabular data and never for layout. CSS display: table and related properties is a way of emulating the table layout using pure CSS. You can find detailed information by searching either this forum or the Internet.
Using HTML tables for layout went out years ago, with the introduction of CSS.
Before recommendations are made, we should be aware of the contents of those boxes and their surroundings (context). Images are easy, text is harder, boxes with content that has a limited minimum width are restricting. Give us more information.
There are 5 selling points that my new business offers. Concepts 1-4 are maybe 2-3 words (e.g. “Responsive Web Design”) in length. Concept 5 is also a couple words in length.
It is a 1px square transparent image, which expands to fit the
available width of it’s container and thereby automatically sets
the height of the container equal to that width.
No - you have ONE 1px square image only. You resize it to 400x400 but the image itself remains a single pixel - and the other three can use the SAME image.
Exactly. The image is and always will be 1px square.
How much space it takes up on the screen depends on the width and height attributes you apply to the image. This doesn’t change the size of the image itself - only the space it takes up on the screen.
Because the image is transparent you can’t see any distortion when that one pixel is stretched across hundreds of pixels on the screen.
