0

Here is my html/css code. Please, move border horizontally until you get last row containing less elements then rows above.

http://jsfiddle.net/wb5kT/

Problem starts here. I do want to center entire thing horizontally, so left and right distance from page borders to text would be the same. However, last visible row should be aligned to the left. I do not know beforehand what width of viewport will be, or total number of elements.

Adding "text-align: left" to .images aligns elements in last row to the left, but breaks entire "center align" thing. Example: http://jsfiddle.net/dgLQC/1/

Can it possibly be done without using tables?

IE 8 or lower and old versions of other browsers can be ignored.

Johann
  • 12,158
  • 11
  • 62
  • 89
Nameless
  • 2,306
  • 4
  • 23
  • 28

3 Answers3

0

put float:left in .thumb.

See this, http://jsfiddle.net/C5Pev/

Update:

My bad, above code is not working as wanted. A possible workaround would be,

http://jsfiddle.net/C5Pev/7/

Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • Look at your fiddle. Content is not centered visually anymore. Range from left border to first text is less than range from right border to first text. – Nameless May 14 '12 at 03:20
  • 1
    Sorry, my bad. It was midnight and I didnt notice. There may be several workarounds based on your situation. I dont find a way that will work in all situation. A possible workaround would be using width in percentage. I have given an example of that in update. See the jsfiddle link. – Jashwant May 14 '12 at 06:01
  • That would work, but I want to fit as much elements in row as possible. – Nameless May 14 '12 at 07:01
0

Not sure if I understood your question correctly, but seems like you need to align the text inside the last row (two divs) to the left while keeping all others with the text centered:

You can apply a class for that:

.alignLeft {
    text-align: left;
}

And give that class to the last two divs.

Here is the Fiddle Example!

EDITED:

Your question should be rephrased, it is leading to wrong conclusions on what your goal is, but is this what you are looking for:

See this Fiddle Example!

Relevant CSS Update:

.thumb {
  float: left;              // align divs to the left of each other
  text-align: center;       // center text inside the div
  position: relative;
  border: 1px solid #D9D9D9; // view the blocks, not needed
  margin: 1px;               // get some distance between blocks, not needed
  font-size: 10px;           // small text to view that's centered, not needed
}

Tip: Shrink horizontally until you get 3 blocks by row, thus having the two divs with the text I am on the last row! alone on the last row.

Zuul
  • 16,217
  • 6
  • 61
  • 88
  • I want to align last divs, not their content. And I don't know how much divs will be in the "last row", it depends on the users window width. – Nameless May 14 '12 at 03:17
0

I don't think you can do this even using tables; once you have content that's too wide for the container, the container will assume its parent's width, even though the content happens to be wrapped to fit in a smaller width.

By the way, to ensure that there is an incomplete last row (assuming more than one row) of elements, choose a prime number of elements.

Neil
  • 54,642
  • 8
  • 60
  • 72