Can i display 30 divs inline inside one td? - html

Question

I made a calendar in html and css.
I have individual td for each 30 mins time span.
But i want to create 30 divs inside that td for each minute.
Right now its showing like this :
http://jsfiddle.net/mausami/FHfjL/1/
but i want to display each div in one line.
to show each div i have written ' in each div.
the divs are like this :
<div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>
Can anybody please help me ?

Answer 1

First, a few important improvements to your code.
Class names cannot start with a number.. Quick fix is to append some string to the beginning of them - I used "min_".
You have the same id multiple times. An id should only be used once.
Move all of your styles external - sop doing inline, it's hard to update.
You're not floating anything so you don't need clear:both;
Here's the same thing you have, but pretty code: http://jsfiddle.net/daCrosby/FHfjL/7/
Now, your question. "[how do I] display each div in one line?" I'm not quite sure if you want each div to be in one line (30 lines total), or each div to be in the same line (only 1 line total). So here's both ways:
To display each div on it's own line:
.tbDay div{
display:block;
}
http://jsfiddle.net/daCrosby/FHfjL/8/
To display all 30 in one line:
.tbDay div{
display:inline-block;
width:3.333333%; /* 100% divided by 30 divs */
margin-left:-4px;
}
Note the margin-left:-4px;. This is a fix for the spacing between inline-block elements as discussed here.
http://jsfiddle.net/daCrosby/FHfjL/9/

Answer 2

If you want to use those div to show time passing by,
you could use a gradient and % in background or even better <meter></meter> .
http://www.w3.org/wiki/HTML/Elements/meter
You can easily from js or server side script fill the right value to update your calendar.
cheers

Answer 3

You're displaying the minute div as display:inline-block
Change this to block or remove it completely. Also consider using a list instead of divs.
EDIT
The answer above assumed "each div in a new line" meant one minute div = one new line
As per clarification in the comments below, to make all divs within the td appear in one line, apply a white-space:nowrap
e.g. insert the following into the css portion of your fiddle:
#tblDay td{
white-space:nowrap;
}

Answer 4

Why are you doing clear:both if you want to display them inline-block? Just remove that style rule and it should work as you expect.

Answer 5

When you set display:inline-block, the element effectively behaves like a single character of text, that you can otherwise treat as a block.
Among other things, this means that it will wrap onto a new line if there isn't enough room.
To get around this, add white-space:nowrap to the container element. Optionally, add white-space:normal to the inline-block divs.
I would also suggest defining CSS rules as:
.tdDay {white-space:nowrap}
.tbDay>div {
display:inline-block;
white-space:normal;
}