My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the next line.
Is there a way for me to expand all the divs on the row evenly to fill up the row, similar to how text alignment is justified?
In essence, I wish to establish a minimum width on the div elements, fit as many as possible in a single row, and completely fill the entire row.
Below is a snippet of the HTML code I'm working with:
<!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>
Can this layout be achieved solely with CSS and HTML or would a script be required?
UPDATE: It's important to note that percentage widths have been suggested to span items along a single row, but that's not the objective here. The goal is to emulate justified text behavior with blocks, even when the number of items varies significantly.
The blocks should maintain uniform size, possess a default (minimum) width for wrapping if necessary, and extend their width to occupy the container's width by filling it with child items.
UPDATE 2:
The current setup yields output akin to this:
|--------------------------- Container -----------------------------|
| |------ 1 ------| |------ 2 ------| |------ 3 ------| |
| |------ 4 ------| |------ 5 ------| |------ 6 ------| |
| |------ 7 ------| |
The desired outcome, however, resembles either one of these layouts:
|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |-------- 7 --------| |
|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |------------------------------ 7 ------------------------------| |
Each item possesses a minimum size, so within the above illustration, items #4 and #7 exceed the remaining space on the line and consequently revert to the next line. Ideally, the items already aligned on the line should substantiate the vacuous areas.
Considerations should be given to the potential resizing of the container owing to browser alterations. Therefore, should it diminish to permit only two items per row, the layout should adapt accordingly:
|----------------- Container -----------------|
| |-------- 1 --------| |-------- 2 --------| |
| |-------- 3 --------| |-------- 4 --------| |
| |-------- 5 --------| |-------- 6 --------| |
| |------------------- 7 -------------------| |
This elucidates the fundamental intent behind the query.