I have ul "boxes" that are floated left, so they appear next to each other, and fall under each other when the screen size is reduced, ensuring they are never off-screen. However, what I can't get is how to have the centered. They are always left-aligned.
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;
margin: 0 auto;
width: 400px;
height: 250px;
border: 1px solid red;
}
I know if I give the div an absolute width, say 1200px, it'll be centered to the width. However, doing that prevents the ul's from shifting according to screen size. "width: 100%" doesn't work. Any suggestions? Or is this impossible? Thanks!