I started to put together boxes and lists to see how they would all layout, and I found something I didn’t expect to find. I noticed that the div that was wrapping the ul list lined up very strangely. If you publish the code below you will see the bullets of the list don’t line up to the right of the black line. Instead the are sitting 20 pixels before the line. Also when I put a border around the div with the list, I thought the border would also wrap around the bullets, but the bullets are outside the border instead. Can someone explain this? So this makes it extremely hard to line lists up with other objects.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper{
width:700px;
}
*{
padding: 0;
margin: 0;
}
.line {
background: #B1B1B1;
float: left;
height: 340px;
width: 1px;
}
#box{
float: left;
background:#000;
width: 200px;
height: 100px;
margin: 0 10px 0 10px;
}
#list{
float: left;
border:1px #FF0000 solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box"></div>
<div class="line"></div>
<div id="list">
<ul>
<li>enim ad minima veniam, quis nostrum</li>
<li>exercitation ullamco laboris</li>
<li>eque porro quisquam est</li>
<li>labore et dolore magnam aliquam</li>
<li>aliquid ex ea commodi consequatur</li>
<li>illum qui dolorem eum fugiat quo voluptas</li>
<li>modi tempora incidunt ut labore</li>
</ul>
</div>
</div>
</body>
</html>
The bullets of a UL list are actually on the LI elemements not the UL. Beacuse the left padding and margin of the LI elements has been removed with the * rule, the bullets sit as they do. You will have to compensate, by adding a left-margin back onto your LI elements.
See here for an older but useful article: http://meyerweb.com/eric/css/list-indent.html