Hello comport9,
Looks like you and
Windbrand are in the same class?
Your ul's are left aligned because that's what you told them to do. You can't center them
and float them left, not without some margin or padding to push them toward the center and then that messes up the layout when they drop.
Look at that solution for Windbrands question, or this -
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#wrapper {
padding: 10px 10px 50px;
text-align: center;
background: #333;
}
.ul {
width: 400px;
height: 250px;
display: inline-block;
text-align: left;
border: 1px solid red;
}
</style>
<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>