Multiple in single DIV

Actually I am trying to put multiple clock widget in single div block in such a way that all widgets will show horizontally one after another. Right now when I am putting these widgets it get placed vertically. Here is the illustration below, if you understand...
I want to show the widgets like this... ====widget1===widget2===widget3====
Right now my widget is showing like this... ====widget1==================
widget2
widget3
Thanks in advance....!!!

 

I believe your looking for an inline-block
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Another option is display :table
http://ajaxian.com/archives/display-table

 

Don't use a table for layout. It's no longer 1997.

You'll need some code for this. Let's say your widgets are positioned using the code:

<div class="clockWidgets">
<div class="widget">WIDGETCODE</div>
<div class="widget">WIDGETCODE</div>
<div class="widget">WIDGETCODE</div>
</div>

HTML:

Notice some similarities to a similar block of code? That's right, a UL. You can see your widgets as a list of widgets, therefore a UL is appropriate. Let's rewrite the code a little.

<ul class="clockWidgets">
<li>WIDGETCODE</li>
<li>WIDGETCODE</li>
<li>WIDGETCODE</li>
</ul>

HTML:

Now we have a list of all the widgets. We want to align all widgets in a horizontal row, so we need to use "float" to move each successive element to the right of the previous one. Sound complicated? It's not. Here's the CSS for that.

ul.clockWidgets {
float:left; /*float the block element to the left*/
list-style-type: none; /*get rid of bulletpoints*/
}
 
ul.clockWidgets li {
float: right; /*float all list elements to the right*/
}

HTML:

At the moment, this produces a smushed mess of text. Let's add some margins and padding, with some basic styling to showcase what we've done.

ul.clockWidgets {
float:left; /*float the block element to the left*/
list-style-type: none; /*get rid of bulletpoints*/
}
 
ul.clockWidgets li {
float: right; /*float all list elements to the right*/
margin: 1em;
padding: 1em;
background-color: #111;
color: #fff;
}

HTML:

And we're done! You can see what I've done at the jsfiddle http://jsfiddle.net/9DEhT/. Remember to "Like" the post or make it your best answer if I've helped you!

 

Wrap the all three widgets with a larger div or you can have the widgets in a table like

<tr><td>widget1</td><td>widget2</td><td>widget3</td></tr>

Code (markup):

 

Like I've said above - Tables are NOT a good idea. You are using a table for layout, whereas the name suggests TABLE is for TABULAR DATA.

 

Yes , agree with you Divs are definitely neat compare to table for this kinda requirements.But I suggested tables as just another options.

 

Hi DPs,
In new design cases, div tab have been used. But sometimes, I still use table inside div. It's good because it don't waste your time to create css position for div by div.

 

Ajaxian said display:table, NOT <table> -- they are not the same thing and it is NOT -- I say again NOT "tables for layout"!

Using <table></td> is tables for layout. display:table and display:table-cell lets you have the visual behavior of tables WITHOUT using tables for layout. The only problem with it is that it fixes the number of items per row, but there is nothing semantically wrong with using it since it's CSS, not markup.

 

Thanks deathshadow. I was surprised when jamjar919 jumped on me for offering up what I understood to be perfectly good CSS.

 

Apologies, I likely didn't read your post properly.

 

I think your get your answer.