<LI> inline -vs.- <DIV> float

[XonicGames]

Hey guys. :nana:

I've recently been studying browser efficiency with respects to load time. Also in this category, search optimization.




/* RESET */
body, div, h1, li, ul {
margin: 0;
padding: 0;
}

ul { list-style: none; }

/* PAGE */
#page {
width: 960px;
margin: auto;
}

/* LI INLINE */
#li-inline {
height: 20px;
}

.nav li {
display: inline;
float: left;
width: 320px;
}

/* DIV FLOAT */
#div-float {
height: 20px;
}

#div-float div {
float: left;
width: 320px;
}






<div id="page">
<div id="li-inline">
<ul class="nav">
<li>Filler Text</li>
<li>Filler Text</li>
<li>Filler Text</li>
</ul>
</div>
<div id="div-float">
<div>Filler Text</div>
<div>Filler Text</div>
<div>Filler Text</div>
</div>
</div>



Which type of layout would help the page load faster and optimize search results? From what I heard, the taboo we call tables fall short on both of these points.

[cyberjef]

You should not have much of a problem with load time with either. If you do, it is something else going on.

As far as what to make your navigation from, many would say that navigation is a list. If you can style your list the way needed, then make it a list. It is symantically accurate. A div is just a container, it has no meaning beyond that.