I have a group of elements with a fixed width div , styled for streaming printing using the inline-block display type. This leaves blank space at the end of the line (where the next div cannot be set and wrapped on the next line).
What I would like to do is to expand all the divs on the line evenly to fill the line , similar to the "alignment" alignment for the text .
In other words, I want to have a minimum width on the div elements and put as many of them as possible on one line and fill the entire line.
Here is my HTML example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> #container { margin: 100px; padding: 10px; border: 1px solid blue; } .item { margin: 10px; width: 300px; min-width: 300px; display: inline-block; border: 1px solid red; } </style> </head> <body> <div id="container"> <div class="item">Item One</div> <div class="item">Item Two</div> <div class="item">Item Three</div> <div class="item">Item Four</div> </div> </body> </html>
Is this possible with pure CSS + HTML? Or do I need to write a script to achieve this result?
UPDATE: as people continue to propose using percent width to match elements on the same line, I should note that this is NOT the intention of this question. I want to have something like "Justified" text, but with blocks. The number of elements is variable and may be too large.
Blocks should be of the same size, have a minimum width (default), which will lead to their transfer to the next line, if necessary, and the width of the container must be filled with children, expanding their width.
UPDATE 2:
The current selection produces something like this:
|--------------------------- Container -----------------------------| | |------ 1 ------| |------ 2 ------| |------ 3 ------| | | |------ 4 ------| |------ 5 ------| |------ 6 ------| | | |------ 7 ------| |
I want to see something like this:
|---------------------------- Container ----------------------------| | |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| | | |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| | | |-------- 7 --------| |
Or that:
|---------------------------- Container ----------------------------| | |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| | | |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| | | |------------------------------ 7 ------------------------------| |
Each element has a minimum size, therefore, in the above example, elements # 4 and # 7 will not correspond to the remaining space in the line and will be transferred to the next line. I want those that have already been installed on the line to fill the space.
Please note that the container may change as the browser may be changed. So, if it gets smaller, since only two elements fit into the string, I would like to see something like this:
|----------------- Container -----------------| | |-------- 1 --------| |-------- 2 --------| | | |-------- 3 --------| |-------- 4 --------| | | |-------- 5 --------| |-------- 6 --------| | | |------------------- 7 -------------------| |
Hope this clears up the intent of the question.