Create three lines using div as table tr
I want to create simple three rows div
(no tables concept).
I've tried everything on google, but i didn't get a simple format.
For example, in a table, it was as simple as:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Sorry if I am asking a very simple question.
+3
source to share
4 answers
HTML4 and HTML5 methods
Sometimes it is best to encode elements as with as little code as possible, below you can view the ideal encoding for columns and rows in HTML5 and HTML4 doctrines. It's important to note that HTML5 does not replace DIVs, but in my example, it shows that sometimes you just don't need to use them if that means shortening your code.
3 Columns - Simple HTML5 Method Without Extra Divs
HTML5
<article id="fruits">
<hgroup>
<h1>Some of My Favorite Fruits</h1>
<h2>I generally prefer fruits that are not to sweet</h2>
</hgroup>
<section>
<h2>Bananas<h2>
<p>Some Text..</p>
</section>
<section>
<h2>Kiwi<h2>
<p>Some Text..</p>
</section>
<section>
<h2>Pears<h2>
<p>Some Text..</p>
</section>
</article>
CSS
#fruits section {width:100%;padding:20px 0;}
3 Columns using simple HTML4 method with multiple classes
HTML4
<div class="3-columns">
<div>I'm Column 1</div>
<div>I'm Column 2</div>
<div>I'm Column 3</div>
</div>
CSS
.3-columns {}
.3-columns div {width:100%;padding:20px 0;}
3 Strings Using Simple HTML5 Technique Without Extra Divs
HTML5
<article id="fruits">
<hgroup>
<h1>Some of My Favorite Fruits</h1>
<h2>I generally prefer fruits that are not to sweet</h2>
</hgroup>
<section>
<h2>Bananas<h2>
<p>Some Text..</p>
</section>
<section>
<h2>Kiwi<h2>
<p>Some Text..</p>
</section>
<section>
<h2>Pears<h2>
<p>Some Text..</p>
</section>
<div class="clear"> </div>
</article>
CSS
#fruits section {float:left;width:33.3%;}
.clear {clear:both;}
3 Strings Using Simple HTML4 Method With Multiple Classes
HTML4
<div class="3-rows">
<div>I'm Row 1</div>
<div>I'm Row 2</div>
<div>I'm Row 3</div>
</div>
CSS
.3-rows {}
.3-rows div {width:33.3%;float:left;}
+7
source to share
3 columns in 1 row
<div>
<div class="id">Stack</div>
<div class="id">Overflow</div>
<div class="id">Rulez</div>
</div>
And the style code:
<style type="text/css" media="screen">
.id {
width:33%;
float:left;
}
</style>
3 rows in 1 column
<div>
<div>Stack</div>
<div>Overflow</div>
<div>Rulez</div>
</div>
+1
source to share