I think this'll be the last time I post about this. (hopefully...)
But here's my latest code;
HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test2.css" />
<title>
test
</title>
</head>
<body>
<div id='wrapper'>
<ul class='ul'>
<li class='link'>One1</li>
<li class='link'>One2</li>
<li class='link'>One3</li>
<li class='link'>One4</li>
</ul>
<ul class='ul'>
<li class='link'>One5</li>
<li class='link'>One6</li>
<li class='link'>One7</li>
<li class='link'>One8</li>
</ul>
<ul class='ul'>
<li class='link'>One9</li>
<li class='link'>One10</li>
</ul>
<ul class='ul'>
<li class='link'>One11</li>
<li class='link'>One12</li>
<li class='link'>One13</li>
<li class='link'>One14</li>
</ul>
<ul class='ul'>
<li class='link'>One15</li>
<li class='link'>One16</li>
<li class='link'>One17</li>
<li class='link'>One18</li>
</ul>
</div>
</body>
</html>
Style
Code:
.ul {
float: left;
width: 400px;
height: 250px;
border: 1px solid red;
}
Works just how I want it to, except that the boxes aren't centered. If I put in a width for the wrapper, then the columns don't shift appropriately. Same thing if I add padding or margin... I don't want any part of the columns disappearing off the side of the screen.
Why is this so difficult?
