After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include:
- The spacing on the right side is too large.
- Tables always appear stacked without any spacing in between. My goal is to have them accommodate as many columns of "boxes" as possible with spaces between each before creating a new row based on the user's resolution width.
- Oddly enough, the image for the border on the right side seems to be displaying incorrectly or on the left side. Despite attempting multiple fixes, I cannot seem to rectify the issue. Although, it seems like this one may be resolved! - Seemed to have fixed this one!
- Currently, I find myself needing to paste the entire TR code rather than just using
, otherwise, the first box gets stretched further (as seen in the initial example of the jsfiddle). Is there a way to achieve what I want by only utilizing<div>*infohere*</div>divs? Or is that impossible for my requirements?
CSS:
table#t_gallery, table#t_content{
border-collapse:collapse;
border-spacing:0px;
margin:0px auto;
padding:0px;
}
table#t_gallery {
margin-top:12px;
}
table#t_gallery td {
padding:0px;
}
#t_gallery_top, #t_gallery_bottom {
background: url("/top.png") 0 0 no-repeat;
height:6px;
width:265px;
}
#t_gallery_bottom {
background-image:url("/bottom.png");
}
#t_gallery_left, #t_gallery_right {
background: rgba(11, 14, 15, .5) url("/left.png") 0 0 repeat-y;
width:6px;
}
#t_gallery_right {
background-image:url("/right.png");
}
#t_gallery_middle {
background-color: rgba(11, 14, 15, .65);
width:252px;
}
#t_gallery_middle div{
display:inline-block;
text-align:center;
padding:5px 10px 5px;
vertical-align:top;
}
JSFiddle: https://jsfiddle.net/0waobznt/
What I'm trying to aim for: https://i.sstatic.net/EIJRk.png