Why these display:table-cell divs aren't lined up from left to right

Hi guys,
I want these div guys lined up from left to right, but they go from top to bottom.
What's wrong with my code
HTML:

<div class=all_photos>
    <div class=photo_list>
        <img src="photos/<?php echo $photo['path']; ?>" alt='' title='' /><br/>
        <a href="delete.php?id=<?php echo $photo['id']; ?>" role=button class=button>Delete</a>
        <a href="setting.php?id=<?php echo $photo['id']; ?>" role=button class=button>Setting</a>
    </div>
</div>

Code (markup):

CSS:

.all_photos {
    margin: 0.6em 0;
    display: table;
}
.photo_list { 
    display: table-cell;
    text-align: center;
    border: 0.08em solid #999;
    padding: 0.3em;
}
.photo_list img {
    width: 7em;
    margin-bottom: 0.4em;
}
.button {
    padding: 0.2em 0.7em;
    background-color: #DDD;
    border-radius: 2em;
    border: 0;
    -moz-box-shadow: 0 0 0.2em #888;
    -webkit-box-shadow: 0 0 0.2em #888;
    box-shadow: 0 0 0.2em #888;
}

Code (markup):

Thanks,

 

1) There's only a single cell,
2) it's content are not table-cell,
3) element class attributes are not quoted,
4) it's poorly structured for table related display properties.

<div class="all_photos">
  <div class="photo_list">
    <img src="foo" alt="bar" />
    <a href="foobar" role="button" class="button">Delete</a>
    <a href="fooie" role="button" class="button">Setting</a>
  </div>
</div>

Code (markup):

Don't show us the php, show us the html it delivers.

.all_photos {
    display: table;
    }

.photo_list {
    display: table-row;
    }

.photo_list > img,
.photo_list div {
     display: table-cell;
    }

Code (markup):

^^^^^^
not tested

cheers,

gary

 

Thanks, but I don't want two buttons on the line. I want the big table-cell lining like ul li when set them float left.

This's what your code do:

|++++++++++++|
| |-----|    |
| |-----| 1 2|
| |-----|    |
|++++++++++++|
|++++++++++++|
| |-----|    |
| |-----| 1 2|
| |-----|    |
|++++++++++++|

Code (markup):

I want something like this:

|+++++++++| |+++++++++|
| |-----| | | |-----| |
| |-----| | | |-----| |
| |-----| | | |-----| |
|  1  2   | |  1  2   |
|+++++++++| |+++++++++|

Code (markup):

Thanks

 

I would NOT use display:table for any of this -- and if you've got a whole bunch of those, you're using probably five times as many classes as needed... Since you don't have DIV inside each photo area, you don't seem to have different classes on the anchors or other anchors, etc, etc... The "button" aria role also being a waste of code for being some of the most pointless nonsense ever.

I'd be doing something more like this:

<div class="gallery">
  <div>
    <img src="test.jpg" alt="test image" />
    <a href="#">Delete</a>
    <a href="#">Setting</a>
  </div>
  <div>
    <img src="test.jpg" alt="test image" />
    <a href="#">Delete</a>
    <a href="#">Setting</a>
  </div>
  <div>
    <img src="test.jpg" alt="test image" />
    <a href="#">Delete</a>
    <a href="#">Setting</a>
  </div>
<!-- .gallery --></div>

Code (markup):

with CSS like this:

.gallery {
	text-align:center;
	padding-top:1em;
	background:#CCC;
}

.gallery div {
	display:inline-block;
	padding:1em;
	margin:0 0.4em 1em;
	vertical-align:top;
	background:#EEE;
}

.gallery img {
	display:block;
	margin:0 auto 1em;
}

.gallery a {
	display:inline-block;
	padding:0.25em 1em;
	text-decoration:none;
	color:#000;
	background:#DDD;
}

Code (markup):

That will stack them like you are thinking, but also auto-wrap when the screen is too small something table-cells really aren't meant to do. They will NOT auto-stretch to the same height so you'd need to make sure the images are uniform in size (a wrapping span could be used to aid with scaling/cropping for that)... I added some greyscale just to make it easy to see what's what. Remember, good layouts should be semi-fluid, elastic and responsive so the number of items per row should be coded to be dynamic according to screen width. The above code provides that.

CSS 101, when you have a perfectly good wrapper with a class or ID on it, don't waste time and markup throwing classes at everything... and "Aria roles"? Utter and complete waste of bandwidth in 99.999% of situations that only exists to make it easier for content thieves to make off with your data; particularly when not one legitimate user agent has done anything meaningful with it. (admittedly I say the same about HTML 5 asshattery like NAV, ARTICLE, SECTION and ASIDE)

 

Extra thanks professor @deathshadow, for the CSS lesson.

It works.

It's my fault maybe, I put the outer div inside the foreach loop. When I move it to outside the loop it works and look greats.

 

That'll nab you every time, particularly if working from other people's code. It's why in examples I like to show at least 3 sets of data when it's something that's gonna loop to make it clearer.