Results 1 to 8 of 8
  1. #1
    I have searched all over the net but there are no straight forward working examples that show you how to do this. Basically I want to do what html is able to accomplish with this code example:
    <tr>
    <td width="5%">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    I just want a <div> using CSS that has 5 columns where I can display data on a webpage. Can anyone provide a working example because I cannot figure it out. Thanks
      0 Not allowed!

  2. #2
    HivelocityDD Guest
    Please try this...
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    Should do your job..
      0 Not allowed!

  3. #3
    bear humbug! Guest
    Or, if you wanted to use CSS more cleanly, make one style in a separate sheet that defines that property, and assign it to each div.
    div.columns{
    width: 40px; border: 1px solid black; height:30px; float:left;
    }
    <div class="columns">&nbsp;</div>
    <div class="columns">&nbsp;</div>
    <div class="columns">&nbsp;</div>
    <div class="columns">&nbsp;</div>
    <div class="columns">&nbsp;</div>
    Just a thought, in case you need to change parameters later, it's one place to change instead of every instance.
      0 Not allowed!

  4. #4
    HivelocityDD Guest
    Yes ! I agree .. Its more easier to make changes if its as above
      0 Not allowed!

  5. #5
    Thanks a lot. So if I want to have multiple rows, how can I do that? Meaning each row has data, and then below it has the same div layout. Oh yeah, and how can I force the text to go to the next line for some rows so it will not stretch the column?
      0 Not allowed!

  6. #6
    HivelocityDD Guest
    You can try some thing like this.
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div style="clear:both;"> </div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left; ">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
      0 Not allowed!

  7. #7
    Thanks again I have seen it done differently where it has it like this:
    <div id="container">
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    <div id="div1" style="width:40px;border:1px solid #000000; height:30; float:left;">&nbsp;</div>
    </div>
    and the container has its own CSS values. I assume your method is just as fast? I am basically wanting to use CSS to speed up the load time of the page since one of my pages has so many images that you can see the page resizing itself as it is loading and I assume using CSS would make it load faster. Thanks!
    EDIT
    Oh I noticed your example adds a space inbetween the rows, how can this be achieved without the gaps? Thanks!
      0 Not allowed!

  8. #8
    HivelocityDD Guest
    Its never supposed to show space. For me its not showing any space.
    But you can try the style
    {clear:both; height:0px; vertical-align:top;} for your container div.
    Thanks
      0 Not allowed!

  9. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Related Posts from theWHIR.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •