1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Multiple in single DIV

Discussion in 'HTML & Website Design' started by Akash Mishra, Jun 7, 2013.

  1. #1
    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....!!!
     
    Akash Mishra, Jun 7, 2013 IP
  2. terrymason

    terrymason Well-Known Member

    Messages:
    727
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    145
    #2
    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
     
    terrymason, Jun 8, 2013 IP
  3. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #3

    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!
     
    jamjar919, Jun 8, 2013 IP
  4. Methebest

    Methebest Member

    Messages:
    77
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #4
    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):
     
    Methebest, Jun 8, 2013 IP
  5. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #5

    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.
     
    jamjar919, Jun 8, 2013 IP
  6. Methebest

    Methebest Member

    Messages:
    77
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    43
    #6
    Yes , agree with you Divs are definitely neat compare to table for this kinda requirements.But I suggested tables as just another options.
     
    Methebest, Jun 8, 2013 IP
  7. kids

    kids Active Member

    Messages:
    411
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    68
    #7
    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.
     
    kids, Jun 9, 2013 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Jun 9, 2013 IP
  9. terrymason

    terrymason Well-Known Member

    Messages:
    727
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    145
    #9
    Thanks deathshadow. I was surprised when jamjar919 jumped on me for offering up what I understood to be perfectly good CSS.
     
    terrymason, Jun 12, 2013 IP
  10. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #10
    Apologies, I likely didn't read your post properly.
     
    jamjar919, Jun 12, 2013 IP
  11. Ronaldo Peterson

    Ronaldo Peterson Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    I think your get your answer.
     
    Ronaldo Peterson, Jun 12, 2013 IP