hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : How do I create a simple Div multiple column row?
Closed Thread

Forum Jump

How do I create a simple Div multiple column row?

Closed Thread Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941
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



Sponsored Links
  #2  
Old
Guest
 
Posts: n/a
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..

  #3  
Old
Guest
 
Posts: n/a
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.

Sponsored Links
  #4  
Old
Guest
 
Posts: n/a
Yes ! I agree .. Its more easier to make changes if its as above

  #5  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941
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?

  #6  
Old
Guest
 
Posts: n/a
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>

  #7  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941
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!

  #8  
Old
Guest
 
Posts: n/a
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

Closed Thread

Related posts from TheWhir.com
Title Type Date Posted
Terraform Helps Developers Deploy Applications That Use Multiple Web Services Web Hosting News 2014-07-29 13:27:15
Cirrus Hosting Lets Users Create Virtual Private Networks within Public Cloud Web Hosting News 2014-05-02 12:40:36
Simple Servers Listing 2014-10-22 09:46:50
.CO Internet Launches POP.co to Help Startups Get Online Fast Web Hosting News 2013-08-13 15:42:50
New at the WHIR: Submit a Guest Blog Post to our Industry Perspectives Column Blog 2013-05-02 14:38:57


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?