how does div know to go to next line or does it

[oo7ml]

Hi, i have just replaced a table (which i was using for the layout of my site) with divs. However i'm not sure what the best way is to display my data using divs. I want to be able to place data under neath one another so i used the <br> tag to bring each div down to the next line - however this has left too big of a gap between each line data. Before i was able to adjust the <tr> height to adjust the space between each line. I know i can just take out the <br> and apply a margin to each div but in html how does each div know that it is to be displayed on the next line

<div> text here </div>
<div> text here </div>
<div> text here </div>
<div> text here </div>
<div> text here </div>

<div> text here </div>
<br>
<div> text here </div>
<br>
<div> text here </div>
<br>
<div> text here </div>

[coothead]

Hi there oo7ml,

you may find that these links help...


http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
http://htmlhelp.com/reference/html40/block.html


coothead

[Ferret]

<div> has a line break built in (line break immediately after the <div>), <span> does not.

[Centauri]

First, use appropriate elements to mark up your content, and then look at where divs may be appropriate to group content - don't just put divs around every item.

Your example would be better marked up as :
<p> text here </p>
<p> text here </p>
<p> text here </p>
<p> text here </p>
<p> text here </p>

[mactheweb]

in html how does each div know that it is to be displayed on the next line

A div is what's known as a block level element just like a paragraph or heading. That's the way the html standard is written. Block level elements will always start on a new line unless you specifically style them not to. A br is not necessary.

Centauri is right that your example would be better written with paragraphs. A div is generally used as a block that contains other blocks. Used in conjunction with CSS this gives you all sorts of formatting options.

<div class="lipsum">
<h1>A heading</h1>
<p>Lorem ipsum dolor sit.</p>
<p>Amut nonumy.</p>
</div>