Page 1 of 1
Two column list.
Posted: Mon Jul 21, 2008 8:25 pm
by JellyFish
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.
Re: Two column list.
Posted: Mon Jul 21, 2008 8:49 pm
by Zoxive
I'm not quite sure what your looking for. But the following is pretty simple.
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>
Normally when the data is tabular, a (<)table(>) is the best way.
Re: Two column list.
Posted: Mon Jul 21, 2008 10:36 pm
by JellyFish
Thank you very much, this is perfect.
Exactly what I was looking for. I appreciate it!
Re: Two column list.
Posted: Tue Jul 22, 2008 12:08 am
by Zoxive
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>