Lists of Links

See this page:

http://www.pokeproject.net/resources-pokemon-sprites.php

See how the Links go DOWN.

How would I add another lot of lists however on the other half of the page like this image:



Thanks,
BlueEew.

 

You should constrain the width of ul.nav-side you use for your link lists on the content. Say, 45% , then give it margin on sides 2%, and float them left.

Lets say we create .w-half ( shorthand of width half ), we'll use this as the wrapper of your link list , define it at the css file

.w-half{
width:46%;
float:left;
margin-right:3%;
}

Code (markup):

next update your html, and wrap the list & title sith <div class="w-half">

<div class="w-half">
<p><b>Red, Blue, and Yellow</b><br /><ul class="nav-side">
	<li><a href="/pokemon-sprites-red-and-blue/">Red and Blue Pokemon Sprites</a></li>
	<li><a href="/pokemon-sprites-yellow/">Yellow Pokemon Sprites</a></li>
	<li><a href="/pokemon-sprites-red-blue-yellow-back/">Red, Blue, Yellow Back Sprites</a></li>
        </ul>
</div>

Code (markup):

so now you got blocks of lists, erase all the <br/> .

next, add this clearing classes on your css

.clear{
clear:both;
}

Code (markup):

now after each 2 block of list you add this <div class="clear"></div>.

and see how it goes on your browser

 

Great explanation!

 

Thanks for that it worked.

I gave you rep.

 

Your welcome

& thanks for the rep, appreciated it.