Stacking lists in HTML

Question

I have multiple lists that I want to display within a tab on a web page. I want it to look like this . There are 7 lists - the one on the left is really long. The rest are all the same size and I want them to appear in nice order. Note * The list on the far left will stretch further down then the two stacked rows.

I have tried this -- but it does not seem to be working...Thoughts on another way?

<table id="Lists">
<tr>
<td rowspan="2"><ol id="Long_List"></ol></td>
<td><ol id="a_List"></ol></td>
<td><ol id="b_List"></ol></td>
<td><ol id="c_List"></ol></td>
</tr>
<tr>
<td><ol id="d_List"></ol></td>
<td><ol id="e_List"></ol></td>
<td><ol id="f_List"></ol></td>
</tr>
</table>

TABLEs are not for layouts. Take the time to learn CSS floats. — Diodeus - James MacFarlane, Mar 31 '14 at 15:12
What isn't working about what you have done so far? Doesn't that give you the table structure you asked for? — David, Mar 31 '14 at 15:14
See [this question](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1) for why you shouldn't use a table as a layout. — TylerH, Mar 31 '14 at 15:14
How do you mean it is not working? You can see here that it is working: http://jsfiddle.net/dsyQU/ — bosnjak, Mar 31 '14 at 15:14
Have you the actual finished html with content? This is just ordered list declarations inside table fields. — Bill Dukelow, Mar 31 '14 at 15:15
I understand tables may not be the way to go -- which is why I was hoping others had suggestions on how to do this with css (I don't see how inline block would work). Yes, I have a function that fills in the lists -- the lists aren't he problem, it's positioning them that is getting me — mcfly, Mar 31 '14 at 18:54

score 1 · Accepted Answer · answered Mar 31 '14 at 15:15

1

Get rid of the table and wrap all your lists in <div>s

Use css to float: left on the 1st div and float: right on all the rest.

answered Mar 31 '14 at 15:15

Starscream1984

3,072
1
19
27

score 0 · Answer 2 · answered Mar 31 '14 at 15:21

Just like Starscream1984 said, you can use floats.

You can use display: inline-block for right side lists, so they will stay next each other.

ul {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

vertical-align: top will help them to display nicer.

I hope this will help you: http://jsfiddle.net/6dbar/

Alvaro Menéndez · Answer 3 · 2014-03-31T15:50:45.003

http://jsfiddle.net/Thq53/2/ (updated... there were a mistake in the fiddle)

Here you have a nice and easy layout:

/*   A BASIC LAYOUT for a 1006px width container and 8 columns  */

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8   {
 float: left; 
margin: 0 18px 0 0;  
}

.lastCol { margin-right: 0 !important; }


.col1  { width: 110px; }
.col2  { width: 238px; }
.col3  { width: 366px; }
.col4  { width: 494px; }
.col5  { width: 622px; }
.col6  { width: 750px; }
.col7  { width: 878px; }
.col8  { width: 1006px; margin: 0;}

.container { 
margin: 0 auto; 
padding: 0 0px; 
width: 1006px; 
text-align: left; 
overflow:hidden;
position:relative;
}

/*  --------------------------------- */
.big {
background-color:blue;
height:800px;
 }
.small {
background-color:blue;
height:391px;
margin-bottom:18px;
}

and the html:

<div class="container">
<div class="col2 big"></div>
<div class="col2 small"></div>
<div class="col2 small"></div>
<div class="col2 small lastCol"></div>
<div class="col2 small"></div>
<div class="col2 small"></div>
<div class="col2 small lastCol"></div>
</div>

Put your "ul's" inside the divs.

as you can see in the html of the fiddle, the class used is .col2 as you need the width of each div 2 columns out of 8... You can experiment with a div with col6 and another with col2... 2 divs col4, etc...

Note: never forget to add class .lastcall to the div that is going to be placed at the right of the container. To see the fiddle right, open the window (width) a lot till you can see it 1006px or more.

Stacking lists in HTML

3 Answers3