ul li tag position - html

Question

I have two sets of lists with headings which need to display side-by-side as in the following image:
Here's my html:
<h2>Pages</h2>
<ul class="one">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
<h2>Pages</h2>
<ul class="two">
<li>About</li>
<li>Archives</li>
<li>About</li>
<li>Archives</li>
</ul>
I can't make any changes to the html. I have to accomplish this using css only.
Please refer to the fiddle:
http://jsfiddle.net/Pxtvh/

Answer 1

If you could use html, I would surround each header and it's list with a
<div style="float:left">
This works, I've tried it but if you want to use entirely css, I suppose you could use the css code:
ul.two {
position:absolute;
top:0px;
left:100px;
}
This DOESN'T position the headers because they're both and they don't have individual classes so other than changing the html as above, I can't think of a solution. Also, you would have to update the "left" parameter if you want to change the width of the first list.

Answer 2

Like Waffle Face suggested, you can try explore using position: absolute and set left and top pixel, both for the second set of h2 and ul.

Answer 3

As has been noted, you cannot do this with CSS only.
Ideally, you would be able to wrap a DIV around the group of heading and list, but you've stated that you cannot edit the html.
That leaves one alternative: If you can use JavaScript, you can wrap DIVs around your header-list groupings dynamically to achieve the same effect.
Here is how you would do this with jQuery:
$('h2 + ul').each(function () {
$(this).prev().andSelf().wrapAll('<div class="grouped-list"/>');
});
Then in your css file you would float div.grouped-list left. See a working example.

Answer 4

I know it's not great because it uses position absolute, but here is my solution:
http://jsfiddle.net/Pxtvh/25/
h2:nth-of-type(2){
position: absolute;
left: 100px;
top: 0;
}
ul:nth-of-type(2){
position: absolute;
left: 100px;
top: 1em;
}

Answer 5

ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
This will make the <ul>to float left then edit add HTML
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Then second one:
<ul>
<li>link 1 column2</li>
<li>link 2 column2</li>
<li>link 3 column2</li>
<li>link 4 column2</li>
</ul>