Hey, I'm looking for a more standards, css based way of making a list that has two columns. This list is for a table of contents and the only way I can think of doing two columns is using a table. For an example:
chapter one_________________________chapter five
chapter two_________________________chapter six
chapter three________________________chapter seven
chapter four_________________________chapter eight
I don't know if anyone is doing stuff like this or how.
Thanks.
Two column list.
Moderator: General Moderators
Re: Two column list.
I'm not quite sure what your looking for. But the following is pretty simple.
Normally when the data is tabular, a (<)table(>) is the best way.
Code: Select all
<div class="column">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div class="column">
<ul>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="clear"></div>
<style>
.column{
width:150px;
float:left;
}
.clear{
clear:both;
}
</style>
Re: Two column list.
Thank you very much, this is perfect.
Exactly what I was looking for. I appreciate it!
Exactly what I was looking for. I appreciate it!
Re: Two column list.
You can even put a div around them, and use percentages. For set widths and etc..
Code: Select all
<div class="holder">
<div class="column">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div class="column">
<ul>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="clear"></div>
</div>
<style>
.column{
width:50%; /* Change to 33.33% for 3 columns.. 25% for four.. etc */
float:left;
}
.holder{
width:250px; /* width of box holding the columns */
}
.clear{
clear:both;
}
</style>