Hemlock Posted September 6, 2009 Share Posted September 6, 2009 Hello there folks,Currently I am trying to create a simple table design so I can put collums next to one another in the simplest way, but I am not sure how to approach this matter.What it would look like simplified is as the followingI know how to do them in tables, but I am not sure what CSScode to write for it in order to have it look like that.Currently my CSS and HTML looks like this .table { position: relative; top: 0px; left: 0px; width: 1000px;}.row1 { position: relative; top; 0px; left: 0px; width: 250px;}.row2 { position: relative; top; 0px; left: 250px; width: 250px;}.row3 { position: relative; top; 0px; left: 500px; width: 250px;} <div class="table">table of content <br /> <div class="row1"> Header <br /> Filling1 <br /> Filling2<br /> <div class="row2"> Header <br /> Filling1 <br /> Filling2<br /> <div class="row3"> Header <br /> Filling1 <br /> Filling2<br /> </div> </div> </div> </div> Regards Link to comment Share on other sites More sharing options...
chibineku Posted September 6, 2009 Share Posted September 6, 2009 If the data to be stored is tabular, use a table. If not, you'll need to float some of the elements. This should do it, and you can adjust things as you need to make gaps or whatever. But again, if this is tabular data, use a table, just make sure you use all available descriptive and semantic elements, and move or hide them as you see fit. They should all be there. <html><head><style type="text/css">.table { position: relative; top: 0px; left: 0px; width: auto;}.row1 {background: red; position: relative; top; 0px; left: 0px; width: 100px;float:left;}.row2 {background: blue; position: relative; top; 0px; width: 100px;float:left;}.row3 {float:left;background: green; position: relative; top; 0px; left: 0px; width: 100px;}</style></head><body><div class="table">table of content <br /></div> <div class="row1"> Header <br /> Filling1 <br /> Filling2<br /></div> <div class="row2"> Header <br /> Filling1 <br /> Filling2<br /></div> <div class="row3"> Header <br /> Filling1 <br /> Filling2<br /> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.