Hi,
I was working on creating a layout today which goes as follows:
+----+ +----+ +----+ +----+
| | | | | | | |
+----+ +----+ +----+ +----+
Looks simple, but I have some additional specs:
- The max number of columns (n) needs to be dynamic (This HTML page is generated at run-time).
- The entire set must be horizontally fluid (they compress as much as they can when window is narrowed.
- The entire set must also be centered on the screen with no more than n columns in any 1 row at a time.
- Ideally, the right-most "boxes" drop to the row below and re-arrange when necessary, i.e. when window is narrowed and n boxes do not fit on the screen.
- Of course, when there are more than n elements to display they just create additional rows of these.
- The individual boxes are bordered with rounded corners and clickable with whatever action.
With some research (google+adaptations to examples I found) I was able to do #6 like I wanted using divs and css. However, I had a really hard time doing 2-4. I got almost all the way there but I, for the life of me, could not get 2 and 3 to work. 2 was not that big a deal, but 3 was crucial. I was using floating divs for positioning and found an example site that mentioned using relative positioning and shift left etc to get it to center but it just did not work in my case (although the example works fine). In my case, instead of centering they would start at the center and go towards the right making it look comical so I don't know what I missed.
After struggling with this for a couple hours I did it with the following code in like 5 minutes:
<simplified code>
max_columns = 3; /* whatever */
html = "<table>";
for i = 1 to num_elements
if i % max_columns eq 1 then
html += "<tr>";
endif
html += "<td>";
html += "<div>my element</div>"; /* This is a complex multi-leveled div */
/* that makes boxes with rounded corners */
html += "</td>";
if i % max_columns eq 0 or i eq num_elements then
html += "</tr>";
endif
endfor
html += "</table>";
</simplified code>
This satisfies all my requirements except #4 which is a nice-to-have but not necessary.
Question: [How would you]/[Is there any way to] do it without using tables?
EDIT: I haven't had a chance to implement/test any of the potential solutions below, as I need to finish other aspects (in the next 5 days) before I come back to this problem. My current, lame (?) solution seems to work fine except for req #4, so this issue is not on my critical path right now. But I will test and post feedback on this soon-ish. So I'm going to keep this question open until then. I do appreciate the responses. Thanks.
EDIT #2: So I tried some of the solutions below and this is what I came up with:
<html>
<head>
<style>
.box {
width: 19%;
height: 150px;
border: 1px solid black;
display: inline-block;
margin: 3 0 0 0;
}
#center {
text-align: center;
border: 1px solid green;
width: 80%;
height: 85%;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
.footr{
text-align: center;
border: 1px solid green;
width: 80%;
height: 38px;
padding: 0 0 0 0;
vertical-align: middle;
margin: 0;
}
</style>
</head>
<body style="margin-left:0; margin-top:0; margin-right:3;" >
<div style="background-image: url(x); height: 60; width:131; float:left;"></div>
<div style="background-image: url(x); background-repeat:repeat-x; height:60;"></div>
<div class="clearer"></div>
<center>
<div id="center">
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
<span class="box" style="float:right;">Blah</span><br>
<span class="box" style="float:left;">Blah</span>
<span class="box">Blah</span>
<span class="box">Blah</span>
</div>
<div class="footr">Footer</div>
</center>
</body
</html>
As you can probably tell, this solves almost all of my problems, except for 2/3 (not mentioned in my original Q:
- Vertical alignment of the whole block so its centered vertically
- On a horizontal row, I'd like the spans to stick to the outside edges of the outer div with the inner divs evenly spaced between them.
- On the row with less than
nspans, I'd lie them to line up under the 1st 3 spans of the former row.
I'm doing this exercise solely for my personal "itch-i-just-have-to-scratch", and on my own time. For work, I already did most of this (sparingly) using tables to make stuff line up correctly.
P.S.: Please excuse some mal-formed HTML and the inline styles etc. Once I get a 100% working solution, I will clean it up.