Can i display 30 divs inline inside one td?

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 ?

jsfiddle, example code, correctly tagged. why the downvotes? — Madbreaks, Jun 05 '13 at 00:34
You may have been downvoted because you are using attributes that were deprecated in 1999 and using a table for layout. — Rob, Jun 05 '13 at 00:40
Oh why ? Even in fullcalendar design also table is used for layout. — Mausami, Jun 05 '13 at 00:54

score 2 · Accepted Answer · edited May 23 '17 at 12:14

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/

Edmund Joseph · Answer 2 · 2013-06-05T01:46:29.700

1

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;
}

edited Jun 05 '13 at 01:46

answered Jun 05 '13 at 00:38

Edmund Joseph

140
9

if i change it to block than its displaying each div in each line. – Mausami Jun 05 '13 at 00:39
Really? Use `display:block` to display them on one line? No – Madbreaks Jun 05 '13 at 00:41
he wanted each div on a separate line – Edmund Joseph Jun 05 '13 at 00:48
at least that was my understanding of "but i want to display each div in one line." – Edmund Joseph Jun 05 '13 at 00:49
@Mausami so to clarify, you're wanting all 30 divs in one line, not one line for each div? – Edmund Joseph Jun 05 '13 at 01:01

score 1 · Answer 3 · answered Jun 05 '13 at 00:48

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

score 0 · Answer 4 · answered Jun 05 '13 at 00:36

0

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.

answered Jun 05 '13 at 00:36

Madbreaks

19,094
7
58
72

sorry - had to switch browsers to see your fiddle. They're displaying like you want but are being wrapped because your table cells are limiting how wide each can get. The divs aren't your problem. – Madbreaks Jun 05 '13 at 00:41
than what should i do with the table cells ? – Mausami Jun 05 '13 at 00:48
What about the width of 4%. If you set the width of a td then the contents will wrap to fill the width won't they? – griegs Jun 05 '13 at 00:52
I already tried with removing width but its giving same result. – Mausami Jun 05 '13 at 00:56

score 0 · Answer 5 · answered Jun 05 '13 at 00:41

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;
}

I tried this but then the calendar design got changed. the time slot width was not proper. — Mausami, Jun 05 '13 at 00:47

Can i display 30 divs inline inside one td?

5 Answers5